apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(api): show indeterminate spinner until progress has been determined

This commit is contained in:
Sean Sube 2023-02-04 12:23:51 -06:00
parent 53f492459f
commit 88815b3537
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
gui/src/components/LoadingCard.tsx
View File

@ -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
<Typography>{getProgress()} of {props.loading.params.steps}</Typography> direction='column'
<Button onClick={() => cancel.mutate()}>Cancel</Button> spacing={2}
sx={{ alignItems: 'center' }}
>
{renderProgress()}
<Typography>{getProgress()} of {props.loading.params.steps}</Typography>
<Button onClick={() => cancel.mutate()}>Cancel</Button>
</Stack>
</Box> </Box>
</CardContent> </CardContent>
</Card>; </Card>;