The Next website should not render until the bg video has loaded

Question

I am making a NextJS clone of tesla.com, I added a video in background of landing page, BUT as website runs (in production), it takes a lot time to load video, but the other content are displayed without the background, which makes it look very ugly

How can I fix it

Here is the main index.js :

import Navbar from './components/Navbar'
import { useContext } from 'react'
import { Context } from './components/contextApi'

export default function Home() {
  const { isHovered, setIsHovered } = useContext(Context)

  return (
    <>
      {/* I want this video to load and be ready to play - and then the <main> renders */}
      <video  id='video-id' preload='auto' loop={true} autoPlay={true} muted={true} playsInline={true} className='h-full w-full object-cover absolute top-0 -z-50' src='/main.mp4'></video>

      {/* The landing page content */}
        <main
          className={`h-screen font-Gemito`}
        >
          <Navbar />

          <div className="bg-overlay h-1/2 bg-gradient-to-b from-[hsla(0,0%,0%,1)] to-transparent relative -z-20"></div>



          {/* Heading text */}
          <div className={`main-text relative -mt-[35vh]  ${isHovered ? '-z-40' : ''} text-white text-center`}>

            <div className='text-[2.5rem] sm:mb-1 font-[600]'>Model <span className='font-Poppins font-[500]'> 3</span></div>
            <div className='sm:text-2xl text-md'>From <span className='font-Roboto text-md'> $29,740*</span></div>
            <div className='text-xs sm:text-sm font-thin'>After Federal Tax Credit & Est. Gas Savings
            </div>
          </div>

          <div className={`buttons ${isHovered ? '-z-40' : ''} absolute bottom-5 sm:bottom-10 w-full text-center px-4 items-center text-lg justify-center [&>*]:cursor-pointer space-y-3 sm:space-x-6 text-black flex flex-col sm:flex-row`}>
            <div className="py-2 rounded-sm px-24 bg-[#fffc] backdrop-blur-sm">Order Now</div>
            <div className="py-2 text-white rounded-sm px-24 bg-[#222222a6] backdrop-blur-sm">Demo Drive</div>
          </div>

        </main>
    
    </>

  )
}

What should I do, how can I add a loading spinner if the video is loading ? what approach should i go for??

Please the help of developers would be appreciated a lot

I tried adding a onLoadedData eventListener (which ChatGTP suggested me) to the video but that didnt work, I dont know why, looks like the event listeners are not working in react apps..

What should I do now?