text: import * as React from 'react';
  import Box from '@material-ui/core/Box';
  import Fade from '@material-ui/core/Fade';
  import Button from '@material-ui/core/Button';
  import CircularProgress from '@material-ui/core/CircularProgress';
  import Typography from '@material-ui/core/Typography';
  
  export default function DelayingAppearance() {
    const [loading, setLoading] = React.useState(false);
    const [query, setQuery] = React.useState('idle');
    const timerRef = React.useRef();
  
    React.useEffect(
      () => () => {
        clearTimeout(timerRef.current);
      },
      [],
    );
  
    const handleClickLoading = () => {
      setLoading((prevLoading) => !prevLoading);
    };
  
    const handleClickQuery = () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
  
      if (query !== 'idle') {
        setQuery('idle');
        return;
      }
  
      setQuery('progress');
      timerRef.current = window.setTimeout(() => {
        setQuery('success');
      }, 2000);
    };
  
    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Box sx={{ height: 40 }}>
          <Fade
            in={loading}
            style={{
              transitionDelay: loading ? '800ms' : '0ms',
            }}
            unmountOnExit
          >
            <CircularProgress />
          </Fade>
        </Box>
        <Button onClick={handleClickLoading} sx={{ m: 2 }}>
          {loading ? 'Stop loading' : 'Loading'}
        </Button>
        <Box sx={{ height: 40 }}>
          {query === 'success' ? (
            <Typography>Success!</Typography>
          ) : (
            <Fade
              in={query === 'progress'}
              style={{
                transitionDelay: query === 'progress' ? '800ms' : '0ms',
              }}
              unmountOnExit
            >
              <CircularProgress />
            </Fade>
          )}
        </Box>
        <Button onClick={handleClickQuery} sx={{ m: 2 }}>
          {query !== 'idle' ? 'Reset' : 'Simulate a load'}
        </Button>
      </Box>
    );
  }
  