feat(gui): put in a proper loading card
This commit is contained in:
parent
de48450730
commit
3ec8f7c2fc
|
@ -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>;
|
||||
}
|
|
@ -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') {
|
||||
|
|
Loading…
Reference in New Issue