Tengo una función que tarda unos 50 segundos en devolver un valor, por lo que he intentado usar un control giratorio de carga mientras esperaba. A continuación se muestra App.jsx

 import { ThreeDots } from "react-loader-spinner"; const [isLoaded, setLoaded] = useState(false); const LoadingIndicator = (props) => { return (isLoaded && ( <ThreeDots color="#2BAD60" height="100" width="100" /> ) ); }; return ( <> <LoadingIndicator /> <UploadForm setLoaded={setLoaded} /> <Results isLoaded={isLoaded} setLoaded={setLoaded} /> </> );

Ahora, el cálculo ocurre dentro del componente Resultados, donde uso

 useEffect(() => { let active = true load() return () => { active = false } async function load() { setCalculation(undefined) // this is optional const res = await longCalcFunc(r, s) if (!active) { return } setCalculation(res) setLoaded(false); } }, [r,s,]); return (<section> <table> <tbody> <CTRow samples={res} /> </tbody> </table> </section> );

Esto muestra los tres puntos cuando longCalcFunc se está procesando y oculta que ya está hecho. Sin embargo, no 'reproduce' la animación como se esperaba. Pensé que estaba relacionado con el renderizado, pero no pude encontrar la solución exacta para reproducir la animación mientras procesaba/esperaba longCalcFunc.

¿Hay alguna solución viable que deba tomar?