How I implemented a loading spinner in a React Application

Photo by Christophe Hautier on Unsplash

Hi, sorry to bother but this is a fairly old tutorial with Class based components, I have written a new and better one with Function components, head on to How to add a loader/loading spinner in React Function components.

Let’s start with my story 😅.

I was working on a project on the MERN stack, On the front end when I was making calls to the API, it took some time to get the response, but the view was rendered without the data. It was ugly, imagine that one second there is an empty table and another second it’s filled with data. Doesn’t feel right for the user.

I thought about loading spinners, like the buffering spinner on youtube. I immediately thought of using the component state for this. I’ll have a boolean state variable that tells if the data is loading or not. When the variable is true, render the loading spinner, and when it’s false, render the actual data. Simple, right? Yes, it is!

What I’m saying is, Let’s suppose you have a component that makes an asynchronous call to some API and then populates the response of the API on the view.

So, the class component looks like this,

class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this.state={
      loading:true,
      ... // data
      ... // data
    };
  }
  
  async loadData(){
    const data = //asynchronous call to the API ;
    setState({
      loading:false,
      ... //data
      ... //data
    });
  componentDidMount(){
    this.loadData();
  }
  render(){
    if(this.state.loading){
      return ( <Loader /> );
    }
    else {
      return ( <Data /> );
    }
  }
}

Did you understand the code snippet above? Let me explain what I did.

You have a component named MyComponent, in its constructor, you describe the state, one variable is a boolean named loading that tells if the component is loading data or not. The others are the data to be populated on the view. Remember the table that I talked about, it’s that table’s data.

And we have the loadData() function which is async because we will be making an asynchronous call to the API in this function. We get the response from the API in the data variable and then perform a setState, making the loading state variable false, because we have loaded the data and now we’re not loading and set other state variables too. After we’ve done a state update, the component updates and the render() is called again with the new state.

In componentDidMount() we just make a call to the async loadData() function.

In render() method we check the loading state of the component, if the component is in loading state, we render the Loader otherwise, we render the data that we want to populate on the view.

Where to get the Loader?

Well for first trying out you could just use text like “Loading…”, but if you want to use animated spinning loaders follow along.

I used an npm package called ‘react-loader-spinner’. Do an npm install of this package.

Then in your component file import Loader from ‘react-loader-spinner’

import Loader from 'react-loader-spinner';

You can see various styles and properties of the Loaders available in this package at https://www.npmjs.com/package/react-loader-spinner.

Now for basics, I’ll show you one such example,

<Loader type="Circles" color="#00BFFF" height={80} width={80}/>

This renders a Loader spinner with three circles doing some animated stuff, the height, width, and color are also specified. You can also add style props to this to give CSS styles.

That’s all my friend. All the best! ❤️