如何在加载数据时在反应组件中加载微调器

Question

I am trying to add a loading spinner using react hooks use state. I want to what is the easiest way to add a loading spinner in react component when my data is fetching. It needs to look fancy. If there is lightweight npm please suggest it's with an example.

Answer 1

I'm not sure if you look for something like that but I suggest to use Progress from MUI

As an exemple you can use something like this:

<Paper sx={{width: '100%', p:1}} component="ul">
        <div style={{ height: 400, width: '100%'}}>
          {data.length != 0 ? <DataGrid
            rows={data}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
          /> : <CircularProgress className='progress'/>}           
        </div>
</Paper>