import React, { useState, useEffect, use } from 'react';

const LOADING_UPDATE_INTERVAL = 10;

// Setting this value to a large number such that slowCompute() takes longer than the LOADING_UPDATE_INTERVAL means that the suspense will always show the fallback.
const DELAY_ITERS = 200_000;
function slowCompute() {
  for (let i = 0; i < DELAY_ITERS; i++) crypto.randomUUID();
}

// A loading fallback that updates itself, for example to display some cute loading messages.
function Loading() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, LOADING_UPDATE_INTERVAL);
    return () => clearInterval(interval);
  }, []);
  return <>Waiting for {count} </>;
}

// The child that renders slowly, in practice this might be a large data table.
function SlowThing(props) {
  const v = use(props.promise);
  slowCompute();
  return <>Loaded</>;
}

const App = () => {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('yay');
    }, 100);
  });

  return (
    <React.Suspense fallback={<Loading />}>
      <SlowThing promise={promise} />
    </React.Suspense>
  );
};

export default App;