I have a function which takes about 50s to return a value, so I've tried to use a loading spinner while waiting. Below is 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} />
    </>
  );

Now, the calculation happens within Results component, where I use

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>
);

This shows up the three dots when longCalcFunc is processing, and hides it is done. However, it does not 'play' the animation as expected. I thought it was related to rendering, but I could not find the exact solution to play the animation while processing/awaiting longCalcFunc.

Is there a viable solution that I should take?