How to display loading spinner while dom is rendering in React
In this post we will give you information about How to display loading spinner while dom is rendering in React. Hear we will give you detail about How to display loading spinner while dom is rendering in ReactAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to display a loading spinner in react at the time of dom is rendering.
Getting started
This tutorial assumes that you already created a new react project using create-react-app cli.
First, we need to add a spinner element to the index.html, because react initially sends a blank html file with root element and react-scripts.
Open your index.html file and add the following elements after the root div.
<div > <div ></div></div>
Add the spinner css styles inside the <head> element.
<style>.loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 130px; height: 130px; animation: spin 2s linear infinite;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}</style>Showing and hiding spinner
Now, we need to show the app when rendering is completed and hide the spinner, by removing it inside the componentDidMount() lifecycle method.
import React from 'react';class App extends React.Component { state = { loading: true }; componentDidMount() { this.fakeRequest().then(() => { const el = document.querySelector(".loader-container"); if (el) { el.remove(); // removing the spinner element this.setState({ loading: false }); // showing the app } }); } fakeRequest = () => { return new Promise(resolve => setTimeout(() => resolve(), 2500)); }; render() { <span>if (this.state.loading) { return null; //app is not ready (fake request is in process) } return ( <div className="App"> <h1>Hello React</h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <img src="https://avatars2.githubusercontent.com/u/39895671?s=400" alt="react-icon"/> </div> ); }}export default App;In the above code, we are making a fakeRequest once the request is finished, we are removing the spinner from the dom and showing the app.
Output:
Displaying spinner using react hooks
Similarly, we can also display the spinner in functional components using the useEffect hook.
import React, {useState,useEffect} from 'react';export default function App() { const [isLoading, setLoading] = useState(true); function fakeRequest() { return new Promise(resolve => setTimeout(() => resolve(), 2500)); } useEffect(() => { fakeRequest().then(() => { const el = document.querySelector(".loader-container"); if (el) { el.remove(); setLoading(!isLoading); } }); }, []); if (isLoading) { return null; } return ( <div className="App"> <h1>Hello React</h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <img src="https://avatars2.githubusercontent.com/u/39895671?s=400" alt="react-icon"/> </div> );}Hope this code and post will helped you for implement How to display loading spinner while dom is rendering in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs