How to load spinner in react component while data is loading-CodePudding

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.

CodePudding user response：

here is a documentation

https://contactmentor.com/how-to-add-loading-spinner-react-js/

also you can use an library like react-spinners

https://www.npmjs.com/package/react-spinners

CodePudding user response：

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>