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(<LinearProgress />)
+        }
         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 (
         <div className={classes.root}>
             <Grid container spacing={2}>
@@ -134,6 +138,7 @@ export default function ResourceChart(props) {
                             </Select>
                             <FormHelperText>Select Interval</FormHelperText>
                         </FormControl>
+                        {loading}
                         <CardContent style={{ padding: 0 }}>
                             {output(data)}
                         </CardContent>