React Loading Spinner Example

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.

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.

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 kansiris
        <LoaderComponent/>
      </div>
    );
  }
}

export default App;

That is it for React Loading Spinner Example.