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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Fade, Button, CircularProgress, Typography } from '@material-ui/core';
const styles = theme => ({
root: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
button: {
margin: theme.spacing(2),
},
placeholder: {
height: 40,
},
});
class ProgressDelay extends React.Component {
state = {
loading: false,
query: 'idle',
};
componentWillUnmount() {
clearTimeout(this.timer);
}
timer = null;
handleClickLoading = () => {
this.setState({
loading: !this.state.loading,
});
};
handleClickQuery = () => {
clearTimeout(this.timer);
if (this.state.query !== 'idle') {
this.setState({
query: 'idle',
});
return;
}
this.setState({
query: 'progress',
});
this.timer = setTimeout(() => {
this.setState({
query: 'success',
});
}, 2e3);
};
render() {
const { classes } = this.props;
const { loading, query } = this.state;
return (
<div className={classes.root}>
<div className={classes.placeholder}>
<Fade
in={loading}
style={{
transitionDelay: loading ? '800ms' : '0ms',
}}
unmountOnExit
>
<CircularProgress />
</Fade>
</div>
<Button onClick={this.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={this.handleClickQuery} className={classes.button}>
{query !== 'idle' ? 'Reset' : 'Simulate a load'}
</Button>
</div>
);
}
}
ProgressDelay.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ProgressDelay);
|
