feat(gui): put in a proper loading card

gui/src/components/LoadingCard.tsx

@@ -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>;
+}

gui/src/components/MutationHistory.tsx

@@ -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') {