Feat: busy indicator for speed flowchart

This commit is contained in:
Dorian Zedler 2022-07-28 23:55:18 +02:00
parent 999d87766f
commit b690ace6b5
Signed by: dorian
GPG key ID: 989DE36109AFA354
3 changed files with 24 additions and 5 deletions

View file

@ -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>

View file

@ -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);
@ -77,11 +82,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>
</>
);

View file

@ -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'
>