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

30 Jun, 2021
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.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
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 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
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm i react-spinners
Project Structure: It will look like the following.
Project Structure
Approach: 
Step 1: 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‘.
Step 2: Also we need useState to add a state to our functional component and useEffect is also needed.
what we need to import
Step 3: Add a state isLoading which will indicate that our page is loading or not.
Step 4: Add a setTimeout() inside useEffect to make the splash screen appear for a certain time period.
Step 5: 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. Here, App is our default component where we have written our code.
App.js
import React, { useState, useEffect } from 'react';  // Importing loaderimport 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/, you will see the following output:
Reference:  
https://www.npmjs.com/package/react-spinners
https://www.davidhu.io/react-spinners/
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.