apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): add progress bar to menus while loading (#216)

This commit is contained in:
Sean Sube 2023-03-18 14:24:48 -05:00
parent f336cc5d02
commit 0ab52f0c24
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gui/src/components/input/QueryList.tsx
View File

@ -1,5 +1,5 @@
import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils'; import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
import { Alert, FormControl, InputLabel, MenuItem, Select, Typography } from '@mui/material'; import { Alert, FormControl, FormLabel, InputLabel, LinearProgress, MenuItem, Select, Typography } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -50,6 +50,7 @@ export function filterQuery<T>(query: QueryListComplete | QueryListFilter<T>, sh
export function QueryList<T>(props: QueryListProps<T>) { export function QueryList<T>(props: QueryListProps<T>) {
const { labelKey, query, showEmpty = false, value } = props; const { labelKey, query, showEmpty = false, value } = props;
const { result } = query; const { result } = query;
const labelID = `query-list-${props.id}-labels`;
const { t } = useTranslation(); const { t } = useTranslation();
@ -86,7 +87,10 @@ export function QueryList<T>(props: QueryListProps<T>) {
} }
if (result.status === 'loading') { if (result.status === 'loading') {
return <Typography>{t('input.list.loading')}</Typography>; return <FormControl>
<FormLabel id={labelID}>{props.name}</FormLabel>
<LinearProgress />
</FormControl>;
} }
if (result.status === 'idle') { if (result.status === 'idle') {
@ -94,7 +98,6 @@ export function QueryList<T>(props: QueryListProps<T>) {
} }
// else: success // else: success
const labelID = `query-list-${props.id}-labels`;
const data = filterQuery(query, showEmpty); const data = filterQuery(query, showEmpty);
return <FormControl> return <FormControl>