Learn in 
React Table Series - Table of Contents
Part 1 : React Table - How to create a simple react table with pagination and sorting
Part 2 : React Table - How to add Loading Spinner - [This article]
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.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 propertyNow, open Dashboard.js and modify the code as below. This component just fetches the data and displays as a table.
loading...
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 LoadingSpinner3. Modified the default value of
loading state property value to true. This is to make the spinner visible when the page first loads the table4. Finally, setting the
loading state property value to false once the data has been fetched from the APINow, 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.
