React Material UI show progress in Table while waiting on data

user_4241624 0
Viewed 12722

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. currently shows 'no records to display'

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

const [dataFetched, setDataFetched] = useState(false)

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

         {!dataFetched ? (
            <CircularProgress />
         ) : (
            <EmployeesTable
               data={employees}
               token={token}
            />
         )}
react-redux material-ui reactjs progress-bar javascript
1 Answers

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.

user_108821090
Related