diff --git a/frontend/src/components/resourcechart/resourcechart.js b/frontend/src/components/resourcechart/resourcechart.js index 5a0b8c4..db5a6c4 100644 --- a/frontend/src/components/resourcechart/resourcechart.js +++ b/frontend/src/components/resourcechart/resourcechart.js @@ -14,6 +14,7 @@ import FormHelperText from '@material-ui/core/FormHelperText'; import MenuItem from '@material-ui/core/MenuItem'; import FormControl from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; +import LinearProgress from '@material-ui/core/LinearProgress'; const useStyles = makeStyles((theme) => ({ root: { @@ -40,8 +41,12 @@ export default function ResourceChart(props) { const classes = useStyles(); const [data, setData] = React.useState(null); const [interval, setInterval] = React.useState('day'); + const [loading, setLoading] = React.useState(null); let { id } = useParams(); const loadData = async () => { + if (loading === null) { + setLoading() + } let dayData = await fetch(`/simcompanies/API/${interval}?kind=${id}`); let dataWithDate = await dayData.json(); let qualitySortedData = []; @@ -91,9 +96,9 @@ export default function ResourceChart(props) { } else { qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleDateString(); } - } setData(qualitySortedData) + setLoading(null) } useEffect(() => { @@ -110,7 +115,6 @@ export default function ResourceChart(props) { const handleChange = (event) => { setInterval(event.target.value); } - return (
@@ -134,6 +138,7 @@ export default function ResourceChart(props) { Select Interval + {loading} {output(data)}