diff --git a/gui/src/components/LoadingCard.tsx b/gui/src/components/LoadingCard.tsx
new file mode 100644
index 000000000..8c3b49ae9
--- /dev/null
+++ b/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
+
+
+
+
+
+ ;
+}
diff --git a/gui/src/components/MutationHistory.tsx b/gui/src/components/MutationHistory.tsx
index d50c8716c..35a8926ad 100644
--- a/gui/src/components/MutationHistory.tsx
+++ b/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 {
element: React.ComponentType<{value: T}>;
@@ -19,7 +20,7 @@ export function MutationHistory(props: MutationHistoryProps) {
const children = [];
if (status === 'loading') {
- children.push(Generating...
);
+ children.push(); // TODO: get dimensions from current request
}
if (status === 'success') {