javascript – First page load splash screen while fetching large static assets in Next.js

I have a webpage written in Next.js that has a video as background on the main page.

const VideoBackground = ({video}) => {
    return (
        <div className="video_container">
            <video autoPlay muted loop={true} preload="auto" className="video_background">
                <source src={video} type="video/mp4" />
            </video>
        </div>
    );
}

Now, since it’s a heavy resource, when I load the page for the first time, it takes a few seconds to display; I want to add a splash loading screen to ensure that when the home is visible, the video is ready to be displayed.

I was thinking to add a splash screen:

const Splash = ({ children }) => {
  const (loading, setLoading) = useState(true);
  useEffect(() => {
    // Load the heavy asset
    fetch('myvideo.mp4').then(() => {
      setLoading(false);
    })
  }, ())

  return !loading ? children : <div>Loading....</div>
};

and in my _app.js:

...
return (
    <Splash>
        <Component {...pageProps} />
    </Splash>
)
...

The splash screen is visible for a few moments, but then the page loads without showing the video, which loads after a few seconds.
What am I doing wrong?