I need some fresh eyes to tell me the approach they would take on this problem. I have a lottie loading animation component that I call whenever an API request is being made. It looks like this:
export default function LoadingAnimation() {
useEffect(() => {
lottie.loadAnimation({
container: document.querySelector("#logo"),
animationData: loadingAnimation,
});
}, []);
return <div id="logo"></div>;
}
Where I would call:
{isLoading ? <LoadingAnimation /> : <OtherComponent />}
Being that the loading animation <div> has an id to place the loading animation on, what are the options for creating unique ID? Or is creating an unique ID not the way you would solve this? How would you solve this?
My thoughts are just to create a UUID, use a Date/Time stamp (unix time), or something similar to create the ID for the div but am I doing too much? Is there a more simple way of solving this? What are the common patterns for solving this sort of problem?
It seems that none of the suggestions I made would work as they produced multiple loading animations when the components rendered/re-rendered. Therefore, I used the useRef hook instead of an ID:
export default function LoadingAnimation() {
const anime = useRef(null);
useEffect(() => {
lottie.loadAnimation({
container: anime.current,
animationData: clearpathLoadingAnimation,
});
return () => lottie.stop();
}, []);
return <div ref={anime}></div>
}
Solves the problem! More about the useRef hook here.