How to add a loading spinner in React Function components

In this post we will be adding a loader/loading spinner in a ReactJS function component, I had earlier written an article in which I did the same thing using React’s class based components, How I implemented a loading spinner in a React Application.

Photo by Lautaro Andreani on Unsplash

The use case is basically that when we are fetching data using a network call to the backend or a content provider, it takes some time to get the response, and as soon as we get the response we populate the data on the screen, this creates a not so good user experience, one second the screen is empty and the next second it’s filled with data, like this

example of a table where data is loaded by a network call and it just flashes in creating a bad user experience

now we will improve this by adding a loader, but first let’s understand, How?
The requirement: we need to show a loader when the network call is in progress and remove the loader, and show the data when we receive the data from the network call.

How can we do this?
STATE!! We can use state for this, we can have a state variable, which tells that the network call is in progress, we can have a boolean named “isDataLoading”, which is false initially and when we trigger the network call, we change it to true, in which case we will show the loader, and when the network call has finished, we change it to false again, which will remove the loader and show the data, it can be coded like this,

function TableComponentWithLoader() {
  const [isDataLoading, setIsDataLoading] = useState(false);
  
  useEffect(() => {
    getDataFromBackend();
  }, [])

  async getDataFromBackend() {
    //set the state isDataLoading = true before making the network call
    setIsDataLoading(true);
    //make the network call here
    await asyncFunctionThatMakesNetworkCall();
    //reset the state isDataLoading = false when network call has finished
    setIsDataLoading(false);
  }

  return (
    <>
      {isDataLoading ? <Loader /> : <RenderData />
    </>
  )
}

For now let’s take a paragraph element which says “loading data please wait…….”, the UI looks like this

Nice! this is better, text saying that please wait data is loading, at least the user now knows what’s happening

Now let’s add an actual loader to this
You can use anything as a loader, a gif, a video, an image, whatever you feel like, I’ll be using a npm package for the loader, react-loader-spinner.
This package has a number of variations of loaders available to use directly, checkout their website to know more. Now run

npm install react-loader-spinner

in your project, I’ll be using the classic spinner here which can be used like this,

import { RotatingLines } from "react-loader-spinner";

function Loader() {
  return (
    <RotatingLines
      strokeColor="grey"
      strokeWidth="5"
      animationDuration="0.75"
      width="96"
      visible={true}
    />
  )
}

// you need to use this Loader component in the 
// TableComponentWithLoader component

Now our table looks like this,

Now we have a loading spinner telling our users that wait, we are getting your data

Try it out, also check out the different loaders that react-loader-spinner provides, there are a lot of interesting ones, I hope I was of help. ❤