text: import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  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';
  
  const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    },
    button: {
      margin: theme.spacing(2),
    },
    placeholder: {
      height: 40,
    },
  }));
  
  function DelayingAppearance() {
    const classes = useStyles();
    const [loading, setLoading] = React.useState(false);
    const [query, setQuery] = React.useState('idle');
    let timer = null;
  
    React.useState(
      () => () => {
        clearTimeout(timer);
      },
      [],
    );
  
    function handleClickLoading() {
      setLoading(prevLoading => !prevLoading);
    }
  
    function handleClickQuery() {
      clearTimeout(timer);
  
      if (query !== 'idle') {
        setQuery('idle');
        return;
      }
  
      setQuery('progress');
      timer = setTimeout(() => {
        setQuery('success');
      }, 2000);
    }
  
    return (
      <div className={classes.root}>
        <div className={classes.placeholder}>
          <Fade
            in={loading}
            style={{
              transitionDelay: loading ? '800ms' : '0ms',
            }}
            unmountOnExit
          >
            <CircularProgress />
          </Fade>
        </div>
        <Button onClick={handleClickLoading} className={classes.button}>
          {loading ? 'Stop loading' : 'Loading'}
        </Button>
        <div className={classes.placeholder}>
          {query === 'success' ? (
            <Typography>Success!</Typography>
          ) : (
            <Fade
              in={query === 'progress'}
              style={{
                transitionDelay: query === 'progress' ? '800ms' : '0ms',
              }}
              unmountOnExit
            >
              <CircularProgress />
            </Fade>
          )}
        </div>
        <Button onClick={handleClickQuery} className={classes.button}>
          {query !== 'idle' ? 'Reset' : 'Simulate a load'}
        </Button>
      </div>
    );
  }
  
  export default DelayingAppearance;
  