Guide to create React Loading Spinner with Overlay

Guide to create React Loading Spinner with Overlay

Oct 24, 2020 - ReactJS


Often, we want to show a loading indicator while fetching our data or while data is being loaded by our component.This way the user interface is more interactive and user is aware of what is happening. In this article, we will see how to create a loading indicator. We will use a spinner icon from font-awesome component library. Let's call it a loading spinner component. First let's create a basic loading spinner later we will create a loading spinner with an overlay.
To save time, we will use the app that we created before, that we created as part of React Router Configuration - Create React App - Step by Step Configuration
Go to the Download Source section of the above tutorial and once you get access to the source, follow the below steps, as we will be modifying some of the files in that app.

Install font-awesome 

Open command prompt, navigate to the application root folder and type,
npm install font-awesome
We will use the spinner icon from this library, you can use any other if you want.

Install classnames 

Type below command while in command promt,
npm install classnames
This library allows us to conditionally join and manipulate CSS classNames.

Create LoadingSpinner component 

Create a new file named LoadingSpinner.js and add the code as below.
Let's see the importants aspects of the above code snippet:
1. Imported font-awesome and used its fa-spinner icon
2. Used classnames library to make it active conditionally using props.loading property

Rename Dashboard.js to Spinner.js and call LoadingSpinner component 

At this point, navigate to http://localhost:3000/react-loading-spinner/ and you should see a loading spinner similar to the below screenshot,

Create Spinner with Overlay 

If you are new to Overlays, It is just a grayed out area that appears over text, image or any content. This is used basically to tell the user that the content is not accessible until the loading is complete. Now, lets create an overlay and add a spinner on top of it.

Install react-loading-overlay 

Open command prompt, navigate to the application root folder and type,
npm install react-loading-overlay
We will use this ready to use component for our overlay.

Create Reusable Overlay component 

Create a resuable overlay component as below so that we can use it anywhere in our application.
Our reusable component takes in the loading spinner and automatically shows it when required. The rest is self explanatory.

Rename User.js to SpinnerWithOverlay.js and call Overlay Component 

Lets see what we added above,
1. This is similar to Spinner.js except that we used Overlay component
2. Added a state property named showOverlay and a method named handleShowOverlay() to disable the overlay. Also, added a method, autoshowOverlay() in componentDidMount call back to automatically stop the timer after 5 seconds.
3. Use the active property to show or hide the spinner and overlay
4. Finally, added some text to show our components on top of it
At this point, navigate to http://localhost:3000/react-loading-spinner/spinner-with-overlay and you should see a loading spinner along with an overlay similar to the below screenshot. The spinner and overlay appears for 5 seconds and then both of them disappear to enable the text again for selection.
Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by   or  or  below or on the articles on social media.
Like us on: