material ui: How to show loading spinner overlay over the page

Question

I want a loading spinner to be displayed when I click the Login button

The following image shows this

Currently I am trying

    <Fragment>
      {isLoading == true ? <CircularProgress /> : <div></div>}
      <Paper variant="outlined" className={classes.root}>
        <Box px={3} py={2}>
          <Typography variant="h6" align="center" margin="dense">
            Login
          </Typography>
          <Typography variant="inherit" color="textSecondary">
            {errors.non_field_errors?.message}
          </Typography>
          <Grid container spacing={1}>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Email"
                fullWidth
                margin="dense"
              />
              <Typography variant="inherit" color="textSecondary">
                {errors.email?.message}
              </Typography>
            </Grid>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Password"
                type="password"
                fullWidth
                margin="dense"
              />
              <Typography variant="inherit" color="textSecondary">
                {errors.password?.message}
              </Typography>
            </Grid>
          </Grid>

          <Box mt={3}>
            <Button
              variant="contained"
              color="primary"
              onClick={handleSubmit(onSubmit)}
            >
              Login
            </Button>
          </Box>
        </Box>
      </Paper>
    </Fragment>

What i get is

Answer 1

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

export default function SimpleBackdrop() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={handleToggle}>Show backdrop</Button>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={open}
        onClick={handleClose}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

DOCS

DEMO

Answer 2

You should be using the backdrop component from material-ui

https://material-ui.com/components/backdrop/