apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

feat(gui): put in a proper loading card

This commit is contained in:
Sean Sube 2023-01-06 17:35:20 -06:00
parent de48450730
commit 3ec8f7c2fc
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gui/src/components/LoadingCard.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Card, CardContent, CircularProgress } from '@mui/material';
import * as React from 'react';
export interface LoadingCardProps {
height: number;
width: number;
}
export function LoadingCard(props: LoadingCardProps) {
return <Card sx={{ maxWidth: props.width }}>
<CardContent sx={{ height: props.height }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: props.height }}>
<CircularProgress />
</div>
</CardContent>
</Card>;
}

3
gui/src/components/MutationHistory.tsx
View File

@ -2,6 +2,7 @@ import { Grid } from '@mui/material';
import { useState } from 'react';
import * as React from 'react';
import { UseMutationResult } from 'react-query';
import { LoadingCard } from './LoadingCard';
export interface MutationHistoryProps<T> {
element: React.ComponentType<{value: T}>;
@ -19,7 +20,7 @@ export function MutationHistory<T>(props: MutationHistoryProps<T>) {
const children = [];
if (status === 'loading') {
children.push(<div>Generating...</div>);
children.push(<LoadingCard height={512} width={512} />); // TODO: get dimensions from current request
}
if (status === 'success') {