[Problem]
// I am attempting to change the loading spinner on ChannelList to a custom animation using the prop renderPlaceHolderLoading. My custom animation successfully loads however it never disappears even after the channels load.
Note: Strangely if I remove queries from ChannelList the problem is resolved however then I am not able to fetch empty chats.
[UIKit Version]
Using React UIkit version 3.1.2
[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.
const [animationRef, setAnimationRef] = useState(null);
useEffect(() => {
lottie.loadAnimation({
animationData: animation,
autoplay: true,
container: animationRef,
loop: true,
renderer: "svg",
});
}, [animationRef]);
<ChannelList
className={styles.channelList}
queries={{
channelListQuery: {
includeEmpty: true,
},
}}
renderChannelPreview={({ channel }) =>
renderChannelPreview(channel)
}
renderHeader={renderHeader}
renderPlaceHolderLoading={() => (
<MusterChannelListLoading
<div ref={(ref) => setAnimationRef(ref)}></div>
/>
)}
/>