[docs] Add DelayingApperance TypeScript demo

docs/src/pages/demos/progress/DelayingAppearance.js

@@ -23,11 +23,11 @@ function DelayingAppearance() {
   const classes = useStyles();
   const [loading, setLoading] = React.useState(false);
   const [query, setQuery] = React.useState('idle');
-  let timer = null;
+  const timerRef = React.useRef();
 
-  React.useState(
+  React.useEffect(
     () => () => {
-      clearTimeout(timer);
+      clearTimeout(timerRef.current);
     },
     [],
   );
@@ -37,15 +37,15 @@ function DelayingAppearance() {
   }
 
   function handleClickQuery() {
-    clearTimeout(timer);
+    clearTimeout(timerRef.current);
 
     if (query !== 'idle') {
       setQuery('idle');
       return;
     }
 
     setQuery('progress');
-    timer = setTimeout(() => {
+    timerRef.current = setTimeout(() => {
       setQuery('success');
     }, 2000);
   }

docs/src/pages/demos/progress/DelayingAppearance.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } 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: Theme) =>
+  createStyles({
+    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');
+  const timerRef = React.useRef<number>();
+
+  React.useEffect(
+    () => () => {
+      clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  function handleClickLoading() {
+    setLoading(prevLoading => !prevLoading);
+  }
+
+  function handleClickQuery() {
+    clearTimeout(timerRef.current);
+
+    if (query !== 'idle') {
+      setQuery('idle');
+      return;
+    }
+
+    setQuery('progress');
+    timerRef.current = 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;