fix(web-ui): use same theme for loading screen (#921)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

services/web-ui/src/App.tsx

@@ -14,17 +14,17 @@ import { QUERY_CLIENT } from "./queryQlient";
 
 export function App(): ReactElement {
   return (
-    <Suspense fallback={<LoadingView />}>
-      <QueryClientProvider client={QUERY_CLIENT}>
-        <ThemeProvider>
+    <QueryClientProvider client={QUERY_CLIENT}>
+      <ThemeProvider>
+        <Suspense fallback={<LoadingView />}>
           <AuthenticationGuard>
             <NotificationProvider>
               <Router />
               <SnackbarProvider dense />
             </NotificationProvider>
           </AuthenticationGuard>
-        </ThemeProvider>
-      </QueryClientProvider>
-    </Suspense>
+        </Suspense>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }

services/web-ui/src/pages/AuthenticationGuard/AuthenticationGuard.nav.tsx

@@ -9,5 +9,5 @@ export interface AuthenticationGuardNavProps {
 export function AuthenticationGuardNav({
   children,
 }: AuthenticationGuardNavProps): React.ReactElement {
-  return <Box sx={{ p: 3, height: "100vh" }}>{children}</Box>;
+  return <Box sx={{ height: "100vh" }}>{children}</Box>;
 }

services/web-ui/src/pages/ProfileGuard/ProfileGuard.nav.tsx

@@ -1,25 +1,13 @@
-import React from "react";
+import { ReactNode } from "react";
 
-import { Box, Container, Toolbar } from "@mui/material";
-
-import { AppBar } from "src/components/nav/AppBar";
+import { Box } from "@mui/material";
 
 interface ProfileGuardNavProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export function ProfileGuardNav({
   children,
 }: ProfileGuardNavProps): React.ReactElement {
-  return (
-    <Box sx={{ display: "flex", height: "100vh" }}>
-      <AppBar />
-      <Box component="main" sx={{ flexGrow: 1, p: 3, pt: 1, height: "100%" }}>
-        <Toolbar />
-        <Container maxWidth="md" sx={{ height: "100%" }}>
-          {children}
-        </Container>
-      </Box>
-    </Box>
-  );
+  return <Box sx={{ height: "100vh" }}>{children}</Box>;
 }