React Suspense not working with useEffect/setTimeOut-CodePudding

I have suspense like this in the App file

<Suspense fallback={<DelayedFallback />}>

Then I have an useEffect/setTimeOut:

const DelayedFallback = () => {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    setTimeout(() => setLoaded(true), 5000);
  }, []);

  return <> {!loaded && <Loading />} </>;
};

export default DelayedFallback;

The purpose is the client wants people who visit the website to watch their video.

Suspense is not respecting this.

Any help would be appreciated!

CodePudding user response：

If what you need is to delay the rendering of a component for an arbitrary amount of time you could simply do something like:

const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  setTimeout(() => {
    setIsLoaded(true);
  }, 5000);
});

if (!isLoaded) return <Loading />;

return <MyComponent />;

If you are using <video> you could use the ended event instead of a setTimeout.

At the moment, Suspense is only meant for lazy loading React components.