From 096e210e77b771662ce17c6baa749d630f1e949c Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 27 Jul 2023 19:03:56 +1000
Subject: [PATCH] Use LoadingOverlay component

---
 src/frontend/src/components/forms/ApiForm.tsx | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index a49fc6cbb1..be92883824 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -3,6 +3,7 @@ import {
   Alert,
   Checkbox,
   Divider,
+  LoadingOverlay,
   Modal,
   NumberInput,
   ScrollArea,
@@ -396,38 +397,38 @@ export function ApiForm({
     >
       <Stack>
         <Divider />
-        {definitionQuery.isFetching && (
-          <Center>
-            <Loader />
-          </Center>
-        )}
-        {error && (
-          <Alert
-            radius="sm"
-            color="red"
-            title={`Error`}
-            icon={<IconAlertCircle size="1rem" />}
-          >
-            {error}
-          </Alert>
-        )}
-        {canRender && (
-          <ScrollArea>
-            <Stack spacing="md">
-              {fields.map((field) => (
-                <ApiFormField
-                  key={field.name}
-                  field={field}
-                  form={form}
-                  definitions={fieldDefinitions}
-                  onValueChange={(fieldName, value) => {
-                    form.setValues({ [fieldName]: value });
-                  }}
-                />
-              ))}
-            </Stack>
-          </ScrollArea>
-        )}
+        <Stack>
+          <LoadingOverlay
+            visible={definitionQuery.isFetching || initialDataQuery.isFetching}
+          />
+          {error && (
+            <Alert
+              radius="sm"
+              color="red"
+              title={`Error`}
+              icon={<IconAlertCircle size="1rem" />}
+            >
+              {error}
+            </Alert>
+          )}
+          {canRender && (
+            <ScrollArea>
+              <Stack spacing="md">
+                {fields.map((field) => (
+                  <ApiFormField
+                    key={field.name}
+                    field={field}
+                    form={form}
+                    definitions={fieldDefinitions}
+                    onValueChange={(fieldName, value) => {
+                      form.setValues({ [fieldName]: value });
+                    }}
+                  />
+                ))}
+              </Stack>
+            </ScrollArea>
+          )}
+        </Stack>
         <Divider />
         <Group position="right">
           <Button onClick={onClose} variant="outline" radius="sm" color="red">