fix(api): show indeterminate spinner until progress has been determined
This commit is contained in:
parent
53f492459f
commit
88815b3537
|
@ -1,5 +1,6 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Card, CardContent, CircularProgress, Typography } from '@mui/material';
|
import { Box, Button, Card, CardContent, CircularProgress, Typography } from '@mui/material';
|
||||||
|
import { Stack } from '@mui/system';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext, useEffect } from 'react';
|
import { useContext, useEffect } from 'react';
|
||||||
import { useMutation, useQuery } from 'react-query';
|
import { useMutation, useQuery } from 'react-query';
|
||||||
|
@ -51,6 +52,14 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
return doesExist(ready.data) && ready.data.ready;
|
return doesExist(ready.data) && ready.data.ready;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderProgress() {
|
||||||
|
if (ready.status === 'success') {
|
||||||
|
return <CircularProgress variant='determinate' value={getPercent()} />;
|
||||||
|
} else {
|
||||||
|
return <CircularProgress />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (cancel.status === 'success') {
|
if (cancel.status === 'success') {
|
||||||
clearLoading();
|
clearLoading();
|
||||||
|
@ -75,9 +84,15 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
minHeight: params.height.default,
|
minHeight: params.height.default,
|
||||||
}}>
|
}}>
|
||||||
<CircularProgress variant='determinate' value={getPercent()} />
|
<Stack
|
||||||
|
direction='column'
|
||||||
|
spacing={2}
|
||||||
|
sx={{ alignItems: 'center' }}
|
||||||
|
>
|
||||||
|
{renderProgress()}
|
||||||
<Typography>{getProgress()} of {props.loading.params.steps}</Typography>
|
<Typography>{getProgress()} of {props.loading.params.steps}</Typography>
|
||||||
<Button onClick={() => cancel.mutate()}>Cancel</Button>
|
<Button onClick={() => cancel.mutate()}>Cancel</Button>
|
||||||
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>;
|
</Card>;
|
||||||
|
|
Loading…
Reference in New Issue