show loading message while page resources is loading

loading.jsx

const Loading = () =>{
  const [loading, setLoading] = useState(true);
  
   useEffect(() => {
        const handleLoad = () => setLoading(false);

        if (document.readyState === 'complete') {
            setLoading(false);
        } else {
            window.addEventListener('load', handleLoad);
        }

        return () => window.removeEventListener('load', handleLoad);
    }, []);
    // or we can do it simply
    useEffect(() => {
        if (document.readyState === 'complete') {
            setLoading(false);
        } else {
            window.onload = () => setLoading(false)
        }
    }, []);
    return(
      {loading && <P>loading....</p>}
   )
}
export default Loading

/*
useEffect hook to set up an event listener for the load event on the window object. 
When this event fires, the handleLoad function is called,
which sets the loading state to false. 
The useEffect hook also returns a cleanup function that removes the event listener when the component unmounts.
However, to handle the case where the load event has already fired before the component mounts, 

the useEffect hook first checks if the document.readyState is complete. If it is, 
it sets the loading state to false immediately.
Otherwise, it adds the event listener for the load event.  
The return statement of the Loading component checks the loading state and displays a loading message if it's true.
This should
ensure that the loading message is only displayed while the page is loading, and not after the content has already been 
loaded. and also In JavaScript, 
the document.readyState property returns the loading status of the current document.

It can have the following possible values:  "loading": The document is still loading. "interactive": The document has
finished loading and the DOM is ready, 
but some resources such as images and stylesheets may still be loading.
"complete": The document and all its resources have finished loading. In the Loading component's useEffect hook,
we use the document.readyState property to check if the document has already finished loading before the component
mounts. If the document.readyState is "complete", it means that the document has already finished loading, and we
set the loading state to false immediately, without waiting for the load event to fire.  This is important because
if the load event has already fired before the component mounts, then adding a listener for the load event will not
trigger the handleLoad function, and the loading state will not be set to false. By checking the document.readyState
property, we can handle this case and ensure that the loading message is not displayed after the document has finished
loading.*/

/* i know my english is bad but hear is and example of loading circle animation*/

import React, { useState, useEffect } from "react";
import styled, { keyframes } from "styled-components";

const ring = keyframes`
0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`

const Circle = styled.div`
    box-sizing: border-box;
  display: block;
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 4px;
  border: 4px solid #34ff01;
  border-radius: 50%;
  animation: ${ring} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #34ff01 transparent transparent transparent;
  :nth-child(1) {
  animation-delay: -0.45s;
 }
 :nth-child(2) {
  animation-delay: -0.3s;
 }
 :nth-child(3) {
  animation-delay: -0.15s;
 }
`
const Loading = () => {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        if (document.readyState === 'complete') {
            setLoading(false);
        } else {
            window.onload = () => setLoading(false)
        }
    }, []);

    return (
        <>
            {loading &&
                <div className="fixed mt-9 w-screen text-gray-300 z-50 ">
                    <div className="lds-ring inline-block relative w-20 h-20">
                        <Circle />
                        <Circle />
                        <Circle />
                        <Circle />
                    </div>
                </div>
            }
        </>
    );
};

export default Loading;