Html - Load event in React doesn't work. How to make a page loader?

Yukichi
August 16, 2023
265 views
1 vote
2 Answers

I’m trying to make a page loader so I’ve made a Loader component that must add load event on window but it doesn’t work at all:

import React, {useEffect} from "react"
import './loader.sass'

const Loader = () => {
    useEffect(() => {
        console.log("Loading")
        window.addEventListener('load', () => console.log('Loaded'))
    }, [])
    return (
        <div id="loader">
            <div className="center">
                <div className="rect"></div>
                <div className="rect"></div>
            </div>
        </div>
    )
}

export default Loader

In App.jsx file this component is imported first so, as I think, it must render first and launch event listener, but nothing happens.

Is there something I don’t understand in React render? Please tell me if you know any other way to make a page loader. I’ve already tried putting addEventListener in index.html file and in that case load event fires too early.
I’ve just tried Suspense and lazy, but this approach doesn’t wait for styling and images.

Answers

For creating a loader component just use this code that shows loader for 2 sec.

    import React, { useEffect,useState } from "react"
    import './loader.sass'
    
    const Loader = () => {
    
      const [loader, setLoader] = useState(true);
    
      useEffect(() => {

 window.addEventListener('load', () => setLoader(false))
      }, [])
    
      return (
        <>
          {loader && <div id="loader">
            <div className="center">
              <div className="rect"></div>
              <div className="rect"></div>
            </div>
          </div>}
        </>
      )
    }
    
    export default Loader

The process can be broken down into three main steps:

Step 1, Creating the Loader Component:

In this step, you’ll develop a Loader component that presents a full-screen loading animation. While the code snippet below provides an example using Bootstrap for illustration, you’re free to use your preferred framework.

const Loading = () => {
    return (
        <div className="fullscreen-overlay">
            <div className="spinner-border text-light" role="status">
                <span className="visually-hidden">Loading...</span>
            </div>
        </div>
    );
};

const Loading = () => {
    return (
        <div className="fullscreen-overlay">
            <div className="spinner-border text-light" role="status">
                <span className="visually-hidden">Loading...</span>
            </div>
        </div>
    );
};

ReactDOM.render(<Loading />, document.getElementById('root'));

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Spinner</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

Step 2: Designing a Higher-Order Component (HOC) and Combining with the Loader

Here, you’ll design a HOC and integrate it with the previously created Loader component to manage the loading behavior effectively.

const withWindowLoad = (WrappedComponent) => {
    return (props) => {
        const [isLoading, setIsLoading] = useState(true);

        useEffect(() => {
            const handleWindowLoad = () => {
                setIsLoading(false);
            };

            window.addEventListener('load', handleWindowLoad);

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

        return (
            <React.Fragment>
                {isLoading ? <LoadingComponent /> : <WrappedComponent {...props} />}
            </React.Fragment>
        );
    };
};

Step 3: Wrapping the Target Component with the HOC

Finally, you’ll utilize the HOC to wrap the target component, ensuring that the loading animation is displayed while the content loads.

const YourComponent = () => {
    // Your component's content here
};

export default withWindowLoad(YourComponent);

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Load event in React doesn't work. How to make a page loader?

Answers