React animated loading/splash screen using ‘react-spinners’

Displaying a loading or splash screen during response time from the server is an excellent way to interact with the user. But making a loading/splash screen becomes difficult when we want to practically use an animated loader, where we need to make extra efforts to write down its styling file. To overcome this problem, we use a bunch of predefined loaders from the react-spinners module.

Prerequisites:

• NodeJS or NPM
• ReactJS

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm i react-spinners

Project Structure:

Project Structure

The updated dependencies in package.json file will look like.

  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.8",
    "web-vitals": "^2.1.4",
  }

Approach: 

• We will write our code in App.js, no need to make any other components for this project. For using the predefined spinners we need to import the ‘loader‘ component from ‘react-spinners‘.
• Also we need useState to add a state to our functional component and useEffect is also needed.
• Add a state isLoading which will indicate that our page is loading or not.
• Add a setTimeout() inside useEffect to make the splash screen appear for a certain time period.
• Lastly we can use a custom CSS block to override its property and use it when isLoading is true i.e page is still loading.

Example: Now write down the following code in the App.js file.

Javascript

import React, { useState, useEffect } from 'react';

// Importing loader
import PacmanLoader from "react-spinners/PacmanLoader";
import ClockLoader from "react-spinners/ClockLoader";
import './App.css';

const App = () => {

    // Loading state
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {

        // Wait for 3 seconds
        setTimeout(() => {
            setIsLoading(false);
        }, 3000);
    }, []);

    // Custom css for loader
    const override = `
  display: block;
  margin: 0 auto;
  border-color: red;
`;

    return isLoading ?

        // If page is still loading then splash screen
        <PacmanLoader color={'#36D7B7'} isLoading={isLoading}
            css={override} size={150} /> :
        <h1 className="App">
            This is Main Page
            {<ClockLoader color={'#36D7B7'} isLoading={isLoading}
                css={override} size={150} />}
        </h1>
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000