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 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: 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.
Javascript
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:
