Learn in 
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.Open command prompt, navigate to the application root folder and type,
npm install font-awesomeWe will use the spinner icon from this library, you can use any other if you want.
Type below command while in command promt,
npm install classnamesThis library allows us to conditionally join and manipulate CSS classNames.
Create a new file named
LoadingSpinner.js and add the code as below.loading...
Let's see the importants aspects of the above code snippet:
1. Imported
font-awesome and used its fa-spinner icon2. Used
classnames library to make it active conditionally using props.loading propertyloading...
At this point, navigate to
http://localhost:3000/react-loading-spinner/ and you should see a loading spinner similar to the below screenshot,
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.
Open command prompt, navigate to the application root folder and type,
npm install react-loading-overlayWe will use this ready to use component for our overlay.
Create a resuable overlay component as below so that we can use it anywhere in our application.
loading...
Our reusable component takes in the loading spinner and automatically shows it when required. The rest is self explanatory.
loading...
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 overlay4. 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.
