-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
DelayingAppearance.js
89 lines (81 loc) · 2.15 KB
/
DelayingAppearance.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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,
},
}));
export default function DelayingAppearance() {
const classes = useStyles();
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 = () => {
clearTimeout(timerRef.current);
if (query !== 'idle') {
setQuery('idle');
return;
}
setQuery('progress');
timerRef.current = window.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>
);
}