From 837c4598fffee42797cf50cf6a3d86d0ed5c27f3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 16 Dec 2025 20:37:25 +0000
Subject: [PATCH] loading state

---
 .../components/design-elements/BasePage.tsx   | 21 +++++++++++++++++--
 client/src/components/layouts/RootLayout.tsx  |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/client/src/components/design-elements/BasePage.tsx b/client/src/components/design-elements/BasePage.tsx
index 6c9ffe1df..cebe801b3 100644
--- a/client/src/components/design-elements/BasePage.tsx
+++ b/client/src/components/design-elements/BasePage.tsx
@@ -1,6 +1,7 @@
 import Stack from "@mui/material/Stack";
 import { ErrorFallback, EmptyFallback, EmptyMonitorFallback } from "./Fallback";
 import { Breadcrumb } from "./Breadcrumb";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import type { StackProps } from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
@@ -49,7 +50,15 @@ export const BasePageWithStates = ({
   const showLoading = loading && (!items || items.length === 0);
 
   if (showLoading) {
-    return null;
+    return (
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        sx={{ height: "100%" }}
+      >
+        <CircularProgress color="primary" size={28} />
+      </Stack>
+    );
   }
 
   if (error) {
@@ -106,7 +115,15 @@ export const MonitorBasePageWithStates = ({
   const showLoading = loading && (!items || items.length === 0);
 
   if (showLoading) {
-    return null;
+    return (
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        sx={{ height: "100%" }}
+      >
+        <CircularProgress color="primary" size={28} />
+      </Stack>
+    );
   }
 
   if (error) {
diff --git a/client/src/components/layouts/RootLayout.tsx b/client/src/components/layouts/RootLayout.tsx
index 7a58292cc..47a835164 100644
--- a/client/src/components/layouts/RootLayout.tsx
+++ b/client/src/components/layouts/RootLayout.tsx
@@ -23,7 +23,7 @@ const RootLayout = () => {
           alignItems: "center",
         }}
       >
-        <Stack maxWidth={1280} width="100%" paddingY={theme.spacing(6)}>
+        <Stack maxWidth={1280} width="100%" paddingY={theme.spacing(6)} flex={1}>
           <Outlet />
         </Stack>
       </Stack>