loading screen circle is now properly centered all the time

src/app/LoadingScreen.tsx

@@ -9,7 +9,20 @@ export default function LoadingScreen(props: Props) {
 	const theme = useTheme();
 
 	return (
-		<Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}>
+		<Box 
+			sx={{
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				textAlign: "center",
+			}}
+		>
 			<CircularProgress
 				size={150}
 				style={{ marginBottom: theme.spacing(4) }}

src/navigation/Router.tsx

@@ -8,6 +8,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { getWhitelabel } from "services/whiteLabel";
 import Ventilation from "pages/VentEditor";
 import { useGlobalState } from "providers";
+import { Box } from "@mui/material";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
@@ -288,7 +289,8 @@ export default function Router() {
   return (
     <BrowserRouter>
       <Header />
-      <Suspense fallback={<LoadingScreen />}>
+      {/* <Box sx={{ height: "100%", minHeight: "200px" }}> */}
+        <Suspense fallback={<LoadingScreen message="Loading Page"/>}>
           <Routes>
             
             {/* Redirects */}
@@ -334,6 +336,7 @@ export default function Router() {
             
           </Routes>
         </Suspense>
+      {/* </Box> */}
     </BrowserRouter>
   )
 }