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.
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:
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.
- 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.
- 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.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: