I know it is possible to show Circular progress over the as-yet-to-be-populated table. How do you do it?

As it stands right now the table says No records to display .... until the server returns with the data.

========= further to @torquan response this is what worked for me in more detail.

const [dataFetched, setDataFetched] = useState(false)

Convert EmployeesTable into a ponent - then I had to pass props in and it works perfectly.

         {!dataFetched ? (
            <CircularProgress />
         ) : (
            <EmployeesTable
               data={employees}
               token={token}
            />
         )}

I know it is possible to show Circular progress over the as-yet-to-be-populated table. How do you do it?

As it stands right now the table says No records to display .... until the server returns with the data.

========= further to @torquan response this is what worked for me in more detail.

const [dataFetched, setDataFetched] = useState(false)

Convert EmployeesTable into a ponent - then I had to pass props in and it works perfectly.

         {!dataFetched ? (
            <CircularProgress />
         ) : (
            <EmployeesTable
               data={employees}
               token={token}
            />
         )}

• javascript
• reactjs
• react-redux
• material-ui
• progress-bar

2 Answers 2

You could display a spinner until the data is fetched.

That part could look like this:

<table>
  {!dataFetched ? <Spinner /> : <YourTableBody>}
</table>

You could use a <Spinner /> from one of the libraries on npm for example or write your own.

You would initialize dataFetched as false and set it to true when your API call finished. If that is too general, you should post your code for the table.

For a plex table, the mui data-grid is the remended ponent, and it has support for loading state built-in:

https://mui./x/react-data-grid/ponents/#loading-overlay