Show percentage loaded for canvas images in React JS?

I am trying to build a loading screen like the following website: https://heycusp.com/ However, in my case instead of a progress bar I will just be displaying the percentage of the DOM loaded (updates as DOM loads).

I technically have roughly 30 images in one page (I'm aware that's a lot), and am using Robin Dela's hover effect to alternate between two images/div. A sample code is shown below:

function Home(){
  const categories = [
    "category1",
    "category2",
    "category3",
    "category4",
    "category5",
  ];

  const imageRef = useRef(categories.map(() => createRef()));
  const imageRefTwo = useRef(categories.map(() => createRef()));
  const imageRefThree = useRef(categories.map(() => createRef()));

const images = [
    [
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
    ],
     [
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
    ],
        [
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
    ],
        [
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
    ],
        [
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
      ["/images/sampleimage1.jpg", "/images/sampleimage2.jpg"],
    ]
  ];

useEffect(() => {
    imageRef.current.forEach((ref, index) => {
      arr.push(
        new hoverEffect({
          parent: ref.current,
          intensity: 0.3,
          image1: hoverImages[index][0][0],
          image2: hoverImages[index][0][1],
          displacementImage: "/images/displacement.jpg",
          imagesRatio: 536 / 650,
          angle: Math.PI / 2,
        })
      );
    });

    imageRefTwo.current.forEach((ref, index) => {
      arr2.push(
        new hoverEffect({
          parent: ref.current,
          intensity: 0.3,
          image1: hoverImages[index][1][0],
          image2: hoverImages[index][1][1],
          displacementImage: "/images/displacement.jpg",
          imagesRatio: 536 / 650,
          angle: Math.PI / 2,
        })
      );
    });

    imageRefThree.current.forEach((ref, index) => {
      arr3.push(
        new hoverEffect({
          parent: ref.current,
          intensity: 0.3,
          image1: hoverImages[index][2][0],
          image2: hoverImages[index][2][1],
          displacementImage: "/images/displacement.jpg",
          imagesRatio: 536 / 650,
        })
      );
    });
  }, []);

return(
{categories.map((category, index) => (
            <div className='slide' key={index} id={`slide-${index + 1}`}>
              <div className='slide__number white-text'>0{index + 1}</div>
              <div className='slide__img-wrap'>
                <div className='slide__img' ref={imageRef.current[index]}></div>
                <div
                  className='slide__img2'
                  ref={imageRefTwo.current[index]}
                ></div>
                <div
                  className='slide__img3'
                  ref={imageRefThree.current[index]}
                ></div>
}
)
}

To put it simply, I am generating slides that contains 3 divs (2 images/slide__img div for the hover effect), for each category (5 categories, so in total 5 category * 3 div/category * 2 images/div = 30 images) and I would like to show a percentage of the dom that has been loaded.

I know that for the img tag, you just have to keep track of the number of images loaded and reflect that in to your percentage but I don't know about WebGL elements, as the canvas tag doesn't have a load event.

I searched online and found tracking XHR and reflecting that into the percentage but as I tried it I felt like it was an overkill.

I would greatly appreciate it if anyone could lead me to the right direction.

Thank you for your time.