src/components/Header.tsx

@@ -1,10 +1,4 @@
-import {
+import { AppBar, Toolbar, Container, Typography } from '@mui/material';
-  AppBar,
-  Toolbar,
-  Container,
-  Typography,
-  Skeleton,
-} from '@mui/material';
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -25,7 +19,6 @@ 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, Skeleton, Typography } from '@mui/material';
+import { Card, CardContent, Grid, Typography } from '@mui/material';
 
 /**
  *
@@ -15,7 +15,6 @@ export default function SpeedFlowchartPage() {
   const { competitionId, categoryId } = useParams();
   const { api, setTitle } = useContext(Context);
 
-  const [loading, setLoading] = useState(true);
   const [flowchartResult, setFlowchartResult] =
     useState<SpeedFlowchartResult>();
 
@@ -23,18 +22,14 @@ 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);
@@ -43,18 +38,9 @@ export default function SpeedFlowchartPage() {
 
   return (
     <>
-      <Grid
+      <Grid container spacing={2}>
-        container
-        spacing={2}
-        direction={{ xs: 'column-reverse', md: 'row' }}
-      >
         {flowchartResult?.rounds.map((round, roundKey) => (
-          <Grid
+          <Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}>
-            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) => (
@@ -91,18 +77,11 @@ export default function SpeedFlowchartPage() {
           </Grid>
         ))}
 
-        {flowchartResult === undefined && !loading && (
+        {flowchartResult === undefined && (
           <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', marginBottom: '16px' }}
+        sx={{ marginTop: '16px' }}
         className='root-container'
         maxWidth='lg'
       >