refactor: include progress bar in CustomInitialLoader

graasp · Sep 12, 2022 · 814d207 · 814d207
1 parent aff6cbd
commit 814d207
Showing 1 changed file with 6 additions and 15 deletions.
diff --git a/src/CustomInitialLoader/CustomInitialLoader.tsx b/src/CustomInitialLoader/CustomInitialLoader.tsx
@@ -1,43 +1,34 @@
 import React from 'react';
-import { Typography, Container, makeStyles } from '@material-ui/core';
+import { Container, makeStyles, LinearProgress } from '@material-ui/core';
 import GraaspLogo from '../GraaspLogo';
 
 interface Props {
   id?: string;
-  text?: string;
 }
 
 const useStyles = makeStyles((theme) => ({
   container: {
     height: '100vh',
     display: 'flex',
+    flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  text: {
-    marginLeft: theme.spacing(2),
+  progressBar: {
+    marginTop: theme.spacing(2),
     color: theme.palette.primary.main,
   },
   logo: {
     fill: theme.palette.primary.main,
   },
-  link: {
-    textDecoration: 'none',
-    fontStyle: 'italic',
-    color: 'black',
-  },
 }));
 
-const CustomInitialLoader: React.FC<Props> = ({ text, id }) => {
+const CustomInitialLoader: React.FC<Props> = ({ id }) => {
   const classes = useStyles();
   return (
     <Container id={id} className={classes.container}>
       <GraaspLogo height={100} className={classes.logo} />
-      <div className={classes.text}>
-        <Typography variant='h4' align='center'>
-          {text ?? 'Loading…'}
-        </Typography>
-      </div>
+      <LinearProgress className={classes.progressBar} />
     </Container>
   );
 };