AppDividend
Latest Code Tutorials

React Loading Spinner Example

6

React Loading Spinner Example is the leading topic, we will discuss today. In this tutorial, we define how to use loader in react js. Each loader allows the loading state as a boolean. The loading state defaults to false. It can be implemented for an async operation the data load to view.  I will use Axios library to fetch the data from Github API. After we get a response from API, we disable the loader or activity indicator and display the data in the proper format.

If you want to learn more about React.js then check out this  React 16 – The Complete Guide (incl. React Router 4 & Redux) Guide. It has a very brief intro about React and Redux.
React 16 – The Complete Guide (incl. React Router 4 & Redux)

React Loading Spinner Example

First, we install React Project. We use create-react-app to generate the skeleton of the project.

Step 1: Configure React js Project

Move your Terminal and Hit Following Command.

npx create-react-app reactloader

After creating project switch to project directory and type following command to start to react server.

yarn start

Step 2: Define a React Component

Go to the src  >> components folder and create a new file called LoaderComponent.js. I have named this file as LoaderComponent.js because of the name suits for this article. You can give any name like FetchDataComponent.js or TableComponent.js if you display the data in the tabular format. The point of this article is how we can display the spinner while the async request is sent and receive the data from the server.

Now, you need to install Axios Promise based library to perform a network request. So, install it using the following command.

yarn add axios

Now,axios added to your project. Write the following code inside LoaderComponent.js file.

// LoaderComponent.js

import React, { Component } from 'react';
import axios from 'axios';

export default class LoaderComponent extends Component {
   constructor(props) {
      super(props);
      this.state = this.state = {name:'',company:'',
         blog: '',
         avatar:'',
         loading: false
       }
      }
       componentDidMount() 
       {  
         axios.get("https://api.github.com/users/KrunalLathiya")
           .then(response => {
             this.setState({
               name:response.data.name,
               company:response.data.company,
               blog: response.data.blog,
               avatar:response.data.avatar_url,
               loading: false
             });
           })
           .catch(error => {
             console.log(error);
           });
       }

   render()
   {
    let data;
    if (this.state.loading) {
      data = <img  data-src={ require('../images/giphy.gif') } />
    } else {
      data = <div>
                <br/>
                Name: {this.state.name}
                <br/>
                Company: {this.state.company}
                <br/>
                Blog: {this.state.blog}
                <br/>
                <img src={this.state.avatar}/>
            </div> 
    }
      return(
      <div>
            {data}
       </div>
      )
   }
}

Okay, so what we have done is when the componentDidMount() lifecycle method is called, Axios library sends a network request to the Github Server. While the request is complete, we need to show the Loader or Loading indicator that show a user that the process is going. So, sit tight and wait for the request to complete. After the request is complete, we need to hide that spinner or loader and display the actual data that has been received in the response. The loader is displayed as below image. Once you add your component into App.js file.

React Spinner

 

Step 3: Add React Component in App.js File

Next, we can add a component in App.js file.

//App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LoaderComponent from './components/LoaderComponent';

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello AppDividend
        <LoaderComponent/>
      </div>
    );
  }
}

export default App;

React Activity Indicator Spinner Loader TutorialThat is it for React Loading Spinner Example.

6 Comments
  1. ramon calvo says

    Hi KRUNAL, I have a comment. in the line:

    this.state = this.state = {name:”,company:”,
    blog: ”,
    avatar:”,
    loading: false

    loading have to be true. right?

    because then in the resolve of promisse is when this state will change and the loader spin will disappear for render the json. tell me if I am wrong.

    1. Jzamit says

      You are wrong my friend, never mutate the state, if you need to change it, always use this.setState({name: “My New Name”});

      1. Clayton says

        He is not wrong.. He never said “mutate” the state, but rather it should be initialized with a true value, as the page is loading when we begin. You should call this.setState({loading: false}) after the data has been fetched.

  2. pranay says

    hello,
    i want set loader on submit button API fetching time

  3. Abhivirus says

    Hey Krunal:
    In the constructor(){
    super();
    this.state={
    loading:true //to load the loader else loader pic will never displayed;
    }
    }

  4. Braulio says

    Great article, we have created a microlibrary to avoid having to manually set the loading indicator to true/false, and keep count of multiple fetch calls, hope it helps: https://github.com/Lemoncode/react-promise-tracker a post about how it works: https://www.basefactor.com/react-how-to-display-a-loading-indicator-on-fetch-calls

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.