Feat: responsive layout

src/components/Header.tsx

@@ -1,4 +1,10 @@
-import { AppBar, Toolbar, Container, Typography } from '@mui/material';
+import {
+  AppBar,
+  Toolbar,
+  Container,
+  Typography,
+  Skeleton,
+} from '@mui/material';
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -19,6 +25,7 @@ export default function Header() {
             <img src='/logo192.png' className='header-icon'></img>
           </Link>
           <Typography variant='h6'>{title}</Typography>
+          {title === '' && <Skeleton height={20} width={200}></Skeleton>}
         </Toolbar>
       </Container>
     </AppBar>

src/pages/SpeedFlowchartPage.tsx

@@ -5,7 +5,7 @@ import {
   convertResultsToSpeedFlowchartResult,
   SpeedFlowchartResult,
 } from '../data/SpeedFlowchart';
-import { Card, CardContent, Grid, Typography } from '@mui/material';
+import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
 
 /**
  *
@@ -15,6 +15,7 @@ export default function SpeedFlowchartPage() {
   const { competitionId, categoryId } = useParams();
   const { api, setTitle } = useContext(Context);
 
+  const [loading, setLoading] = useState(true);
   const [flowchartResult, setFlowchartResult] =
     useState<SpeedFlowchartResult>();
 
@@ -22,14 +23,18 @@ export default function SpeedFlowchartPage() {
     if (competitionId === undefined || categoryId === undefined) {
       return;
     }
+    setTitle('');
 
     api.getCompetitionResults(competitionId, categoryId).then(r => {
       setTitle(
         `${r.comp_name} - ${
-          r.categorys.filter(cat => cat.GrpId === categoryId)[0].name
+          r.categorys.filter(cat => cat.GrpId === categoryId)[0]?.name ?? ''
         }`,
       );
 
+      setLoading(false);
+      console.log('loading false');
+
       const flowchartResult = convertResultsToSpeedFlowchartResult(r);
       console.log(flowchartResult);
       setFlowchartResult(flowchartResult);
@@ -38,9 +43,18 @@ export default function SpeedFlowchartPage() {
 
   return (
     <>
-      <Grid container spacing={2}>
+      <Grid
+        container
+        spacing={2}
+        direction={{ xs: 'column-reverse', md: 'row' }}
+      >
         {flowchartResult?.rounds.map((round, roundKey) => (
-          <Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}>
+          <Grid
+            key={`flowchart-column-${roundKey}`}
+            item
+            xs={12}
+            md={12 / flowchartResult.rounds.length}
+          >
             <h3>{round.roundName}</h3>
             <Grid container spacing={2}>
               {round.pairs.map((pair, pairKey) => (
@@ -77,11 +91,18 @@ export default function SpeedFlowchartPage() {
           </Grid>
         ))}
 
-        {flowchartResult === undefined && (
+        {flowchartResult === undefined && !loading && (
           <Grid item xs={12} className={'center-children'}>
             This competition or category does not have a speed tree!
           </Grid>
         )}
+
+        {loading &&
+          new Array(5).fill(0).map((_, i) => (
+            <Grid key={`flowchart-column-skeleton-${i}`} item xs={12 / 5}>
+              <Skeleton height={50}></Skeleton>
+            </Grid>
+          ))}
       </Grid>
     </>
   );

src/utils/PageTemplate.tsx

@@ -12,7 +12,7 @@ export default function PageTemplate(props: { children: JSX.Element }) {
   return (
     <LocalizationProviderWrapper>
       <Container
-        sx={{ marginTop: '16px' }}
+        sx={{ marginTop: '16px', marginBottom: '16px' }}
         className='root-container'
         maxWidth='lg'
       >