diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d11d12b..7e9af58 100644
--- a/src/components/Header.tsx
+++ b/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() {
{title}
+ {title === '' && }
diff --git a/src/pages/SpeedFlowchartPage.tsx b/src/pages/SpeedFlowchartPage.tsx
index bc6f828..2c9243e 100644
--- a/src/pages/SpeedFlowchartPage.tsx
+++ b/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();
@@ -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);
@@ -77,11 +82,18 @@ export default function SpeedFlowchartPage() {
))}
- {flowchartResult === undefined && (
+ {flowchartResult === undefined && !loading && (
This competition or category does not have a speed tree!
)}
+
+ {loading &&
+ new Array(5).fill(0).map((_, i) => (
+
+
+
+ ))}
>
);
diff --git a/src/utils/PageTemplate.tsx b/src/utils/PageTemplate.tsx
index 113132d..77941dd 100644
--- a/src/utils/PageTemplate.tsx
+++ b/src/utils/PageTemplate.tsx
@@ -12,7 +12,7 @@ export default function PageTemplate(props: { children: JSX.Element }) {
return (