hello, what's the best way to track all of the xhrprogress in waterfall ?
most of heavy website, they always use splashscreen/loading screen while waiting all files(mp3) to finish load, so it will be smooth display.

do you have any idea? i thought it was by using event 'load' but it doesnt work that way,

  useEffect(() => {
    const handleLoad = () => {
      console.log('Component has loaded');
      setLoading(true);
    };

    // Check if the 'load' event has already fired
    if (document.readyState === 'complete') {
      console.log('Component complete');

      handleLoad();
    } else {
      console.log('waiting event');

      window.addEventListener('load', handleLoad);
    }

    return () => {
      window.removeEventListener('load', handleLoad);
    };
  }, []);