by Sai gowtham

How to display loading spinner while dom is rendering in React

How to display loading spinner while dom is rendering in React

In this tutorial, 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.

index.html
<div class="loader-container">
   <div class="loader"></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.

App.js
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() {
    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:

spinner-is-showing-react

Displaying spinner using react hooks

Similarly, we can also display the spinner in functional components using the useEffect hook.

App.js
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>
  );
}

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course