React Table - How to add a loading spinner

React Table - How to add a loading spinner

Nov 01, 2020 - ReactJS

React Table Series - Table of Contents



In our previous article, we learned how to create a simple table in React. In this continuation article, we will add a loading spinner to the table we created here, How to create a simple react table with pagination and sorting
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

Add LoadingSpinner component to React Table 

Now, open Dashboard.js and modify the code as below. This component just fetches the data and displays as a table.
The above code is exactly same as the original code in the previous article, except for the numbered lines. Let's see what are the differences at the highlighted line numbers:
1. First we imported the LoadingSpinner component
2. Default table properties ReactTableDefaults are updated to include the LoadingSpinner
3. Modified the default value of loading state property value to true. This is to make the spinner visible when the page first loads the table
4. Finally, setting the loading state property value to false once the data has been fetched from the API
Now, Open the browser and test the code, on page load, you should see a loading indicator being shown before the data had been fetched. Once the data is retrieved, the loading indicator is hidden. Also, try to navigate using the pagination buttons at the bottom of the table to see the loading spinner in action.
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: