Necesito algunos ojos nuevos que me digan el enfoque que tomarían en este problema. Tengo un componente de animación de carga de lottie al que llamo cada vez que se realiza una solicitud de API. Se parece a esto:
export default function LoadingAnimation() { useEffect(() => { lottie.loadAnimation({ container: document.querySelector("#logo"), animationData: loadingAnimation, }); }, []); return <div id="logo"></div>; }Donde llamaría:
{isLoading ? <LoadingAnimation /> : <OtherComponent />} Dado que la animación de carga <div> tiene una identificación para colocar la animación de carga, ¿cuáles son las opciones para crear una identificación única? ¿O la creación de una identificación única no es la forma en que resolvería esto? Como resolverias esto?
Mis pensamientos son solo para crear un UUID, usar una marca de fecha/hora (hora de Unix) o algo similar para crear la ID para el div, pero ¿estoy haciendo demasiado? ¿Hay una manera más simple de resolver esto? ¿Cuáles son los patrones comunes para resolver este tipo de problema?
Parece que ninguna de las sugerencias que hice funcionaría, ya que producían múltiples animaciones de carga cuando los componentes se renderizaban/volvían a renderizar. Por lo tanto, usé el gancho useRef en lugar de una 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> } ¡Resuelve el problema! Más sobre el gancho useRef aquí .