From d4218d550d47fcafd555a3e7a556985d34643765 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 13:01:43 -0700
Subject: [PATCH 01/11] Upgrade react-router-dom to access useBlocker()

---
 met-web/package-lock.json | 56 +++++++++++++++++++--------------------
 met-web/package.json      |  2 +-
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/met-web/package-lock.json b/met-web/package-lock.json
index 1f2a20c6f..c6d7ff152 100644
--- a/met-web/package-lock.json
+++ b/met-web/package-lock.json
@@ -74,7 +74,7 @@
                 "react-map-gl": "^7.0.21",
                 "react-player": "^2.12.0",
                 "react-redux": "^7.2.8",
-                "react-router-dom": "^6.10.0",
+                "react-router-dom": "^6.23.1",
                 "react-scripts": "^5.0.1",
                 "react-svg": "^15.0.1",
                 "recharts": "^2.4.3",
@@ -4815,11 +4815,11 @@
             }
         },
         "node_modules/@remix-run/router": {
-            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
-            "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==",
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+            "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
             "engines": {
-                "node": ">=14"
+                "node": ">=14.0.0"
             }
         },
         "node_modules/@rollup/plugin-babel": {
@@ -21103,29 +21103,29 @@
             }
         },
         "node_modules/react-router": {
-            "version": "6.10.0",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
-            "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
+            "version": "6.23.1",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+            "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
             "dependencies": {
-                "@remix-run/router": "1.5.0"
+                "@remix-run/router": "1.16.1"
             },
             "engines": {
-                "node": ">=14"
+                "node": ">=14.0.0"
             },
             "peerDependencies": {
                 "react": ">=16.8"
             }
         },
         "node_modules/react-router-dom": {
-            "version": "6.10.0",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
-            "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
+            "version": "6.23.1",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+            "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
             "dependencies": {
-                "@remix-run/router": "1.5.0",
-                "react-router": "6.10.0"
+                "@remix-run/router": "1.16.1",
+                "react-router": "6.23.1"
             },
             "engines": {
-                "node": ">=14"
+                "node": ">=14.0.0"
             },
             "peerDependencies": {
                 "react": ">=16.8",
@@ -29626,9 +29626,9 @@
             }
         },
         "@remix-run/router": {
-            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
-            "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg=="
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+            "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig=="
         },
         "@rollup/plugin-babel": {
             "version": "5.3.1",
@@ -41818,20 +41818,20 @@
             }
         },
         "react-router": {
-            "version": "6.10.0",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
-            "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
+            "version": "6.23.1",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+            "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
             "requires": {
-                "@remix-run/router": "1.5.0"
+                "@remix-run/router": "1.16.1"
             }
         },
         "react-router-dom": {
-            "version": "6.10.0",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
-            "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
+            "version": "6.23.1",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+            "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
             "requires": {
-                "@remix-run/router": "1.5.0",
-                "react-router": "6.10.0"
+                "@remix-run/router": "1.16.1",
+                "react-router": "6.23.1"
             }
         },
         "react-scripts": {
diff --git a/met-web/package.json b/met-web/package.json
index 4607e85e3..dec3a8b97 100644
--- a/met-web/package.json
+++ b/met-web/package.json
@@ -69,7 +69,7 @@
         "react-map-gl": "^7.0.21",
         "react-player": "^2.12.0",
         "react-redux": "^7.2.8",
-        "react-router-dom": "^6.10.0",
+        "react-router-dom": "^6.23.1",
         "react-scripts": "^5.0.1",
         "react-svg": "^15.0.1",
         "recharts": "^2.4.3",

From 92541d79f3410634fd2ab501ee6a446220163628 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 13:05:21 -0700
Subject: [PATCH 02/11] Update app structure to use createBrowserRouter; style
 changes

---
 met-web/src/App.tsx                           | 117 ++++++---------
 .../appLayouts/AuthenticatedLayout.tsx        |  41 +++++
 .../components/appLayouts/PublicLayout.tsx    |  27 ++++
 .../src/components/common/Layout/index.tsx    |  36 +++--
 .../common/Navigation/Breadcrumb.tsx          |  60 +++++++-
 .../layout/Header/InternalHeader.tsx          |   6 +-
 .../src/components/layout/SideNav/SideNav.tsx |   1 +
 met-web/src/routes/AuthenticatedRoutes.tsx    | 142 +++++++++++-------
 met-web/src/routes/UnauthenticatedRoutes.tsx  |  56 +++----
 9 files changed, 308 insertions(+), 178 deletions(-)
 create mode 100644 met-web/src/components/appLayouts/AuthenticatedLayout.tsx
 create mode 100644 met-web/src/components/appLayouts/PublicLayout.tsx

diff --git a/met-web/src/App.tsx b/met-web/src/App.tsx
index 8413a16f8..8ede5f481 100644
--- a/met-web/src/App.tsx
+++ b/met-web/src/App.tsx
@@ -1,24 +1,22 @@
 import React, { useEffect, useState, useContext } from 'react';
 import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
 import './App.scss';
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import {
+    Route,
+    BrowserRouter as Router,
+    RouterProvider,
+    Routes,
+    createBrowserRouter,
+    createRoutesFromElements,
+} from 'react-router-dom';
 import { useAppSelector, useAppDispatch } from './hooks';
-import { MidScreenLoader, MobileToolbar } from './components/common';
-import { Box, Container, useMediaQuery, Theme } from '@mui/material';
-import InternalHeader from './components/layout/Header/InternalHeader';
-import PublicHeader from './components/layout/Header/PublicHeader';
+import { MidScreenLoader } from './components/common';
 import UnauthenticatedRoutes from './routes/UnauthenticatedRoutes';
 import AuthenticatedRoutes from './routes/AuthenticatedRoutes';
-import { Notification } from 'components/common/notification';
-import PageViewTracker from 'routes/PageViewTracker';
-import { NotificationModal } from 'components/common/modal';
-import { FeedbackModal } from 'components/feedback/FeedbackModal';
 import { AppConfig } from 'config';
 import NoAccess from 'routes/NoAccess';
 import { getTenant } from 'services/tenantService';
 import NotFound from 'routes/NotFound';
-import Footer from 'components/layout/Footer';
-import { ZIndex } from 'styles/Theme';
 import { TenantState, loadingTenant, saveTenant } from 'reduxSlices/tenantSlice';
 import { LanguageState } from 'reduxSlices/languageSlice';
 import { openNotification } from 'services/notificationService/notificationSlice';
@@ -27,6 +25,8 @@ import DocumentTitle from 'DocumentTitle';
 import { Languages } from 'constants/language';
 import { AuthKeyCloakContext } from './components/auth/AuthKeycloakContext';
 import { determinePathSegments, findTenantInPath } from './utils';
+import { AuthenticatedLayout } from 'components/appLayouts/AuthenticatedLayout';
+import { PublicLayout } from 'components/appLayouts/PublicLayout';
 
 interface Translations {
     [languageId: string]: { [key: string]: string };
@@ -34,7 +34,6 @@ interface Translations {
 
 const App = () => {
     const drawerWidth = 280;
-    const isMediumScreen: boolean = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
     const dispatch = useAppDispatch();
     const roles = useAppSelector((state) => state.user.roles);
     const authenticationLoading = useAppSelector((state) => state.user.authentication.loading);
@@ -203,71 +202,49 @@ const App = () => {
     }
 
     if (!isAuthenticated) {
-        return (
-            <Router basename={tenant.basename}>
-                <DocumentTitle />
-                <PageViewTracker />
-                <Notification />
-                <NotificationModal />
-                <PublicHeader />
-                <UnauthenticatedRoutes />
-                <FeedbackModal />
-                <Footer />
-            </Router>
+        const router = createBrowserRouter(
+            [
+                {
+                    element: <PublicLayout />,
+                    children: createRoutesFromElements(UnauthenticatedRoutes()),
+                },
+            ],
+            { basename: `/${basename}` },
         );
+        return <RouterProvider router={router} />;
     }
 
     if (roles.length === 0) {
-        return (
-            <Router basename={tenant.basename}>
-                <DocumentTitle />
-                <PublicHeader />
-                <Container>
-                    <NoAccess />
-                </Container>
-                <FeedbackModal />
-                <Footer />
-            </Router>
+        const router = createBrowserRouter(
+            [
+                {
+                    element: <AuthenticatedLayout drawerWidth={0} />,
+                    children: [
+                        {
+                            path: '*',
+                            element: <NoAccess />,
+                        },
+                    ],
+                },
+            ],
+            { basename: `/${basename}` },
         );
+        return <RouterProvider router={router} />;
     }
 
-    if (!isMediumScreen) {
-        return (
-            <Router basename={tenant.basename}>
-                <DocumentTitle />
-                <InternalHeader />
-                <Container sx={{ padding: { xs: 0, sm: 0, md: 0 } }}>
-                    <MobileToolbar />
-                    <AuthenticatedRoutes />
-                    <FeedbackModal />
-                    <Footer />
-                </Container>
-            </Router>
-        );
-    }
-
-    return (
-        <Router basename={tenant.basename}>
-            <DocumentTitle />
-            <Box sx={{ display: 'flex' }}>
-                <InternalHeader drawerWidth={drawerWidth} />
-                <Notification />
-                <NotificationModal />
-                <Box component="main" sx={{ flexGrow: 1, width: `calc(100% - ${drawerWidth}px)`, marginTop: '80px' }}>
-                    <AuthenticatedRoutes />
-                    <FeedbackModal />
-                </Box>
-            </Box>
-            <Box
-                sx={{
-                    backgroundColor: 'var(--bcds-surface-background-white)',
-                    zIndex: ZIndex.footer,
-                    position: 'relative',
-                }}
-            >
-                <Footer />
-            </Box>
-        </Router>
+    const router = createBrowserRouter(
+        [
+            {
+                element: <AuthenticatedLayout drawerWidth={drawerWidth} />,
+                children: createRoutesFromElements(AuthenticatedRoutes()),
+                handle: {
+                    crumb: () => ({ name: 'Dashboard', link: '/home' }),
+                },
+            },
+        ],
+        { basename: `/${basename}` },
     );
+
+    return <RouterProvider router={router} />;
 };
 export default App;
diff --git a/met-web/src/components/appLayouts/AuthenticatedLayout.tsx b/met-web/src/components/appLayouts/AuthenticatedLayout.tsx
new file mode 100644
index 000000000..d795031b2
--- /dev/null
+++ b/met-web/src/components/appLayouts/AuthenticatedLayout.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import '@bcgov/design-tokens/css-prefixed/variables.css';
+import { Outlet } from 'react-router-dom';
+import { Box } from '@mui/material';
+import InternalHeader from '../layout/Header/InternalHeader';
+import { Notification } from 'components/common/notification';
+import { NotificationModal } from 'components/common/modal';
+import { FeedbackModal } from 'components/feedback/FeedbackModal';
+import Footer from 'components/layout/Footer';
+import { ZIndex } from 'styles/Theme';
+import DocumentTitle from 'DocumentTitle';
+import ScrollToTop from 'components/scrollToTop';
+import FormioListener from 'components/FormioListener';
+
+export const AuthenticatedLayout = ({ drawerWidth = 280 }: { drawerWidth?: number }) => {
+    return (
+        <>
+            <DocumentTitle />
+            <Box sx={{ display: 'flex' }}>
+                <InternalHeader drawerWidth={drawerWidth} />
+                <Notification />
+                <NotificationModal />
+                <Box component="main" sx={{ flexGrow: 1, marginTop: '80px' }}>
+                    <ScrollToTop />
+                    <FormioListener />
+                    <Outlet />
+                    <FeedbackModal />
+                </Box>
+            </Box>
+            <Box
+                sx={{
+                    backgroundColor: 'var(--bcds-surface-background-white)',
+                    zIndex: ZIndex.footer,
+                    position: 'relative',
+                }}
+            >
+                <Footer />
+            </Box>
+        </>
+    );
+};
diff --git a/met-web/src/components/appLayouts/PublicLayout.tsx b/met-web/src/components/appLayouts/PublicLayout.tsx
new file mode 100644
index 000000000..12cdcf27e
--- /dev/null
+++ b/met-web/src/components/appLayouts/PublicLayout.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
+import { Outlet } from 'react-router-dom';
+import PublicHeader from '../layout/Header/PublicHeader';
+import { Notification } from 'components/common/notification';
+import PageViewTracker from 'routes/PageViewTracker';
+import { NotificationModal } from 'components/common/modal';
+import { FeedbackModal } from 'components/feedback/FeedbackModal';
+import Footer from 'components/layout/Footer';
+import DocumentTitle from 'DocumentTitle';
+import ScrollToTop from 'components/scrollToTop';
+
+export const PublicLayout = () => {
+    return (
+        <>
+            <DocumentTitle />
+            <PageViewTracker />
+            <Notification />
+            <NotificationModal />
+            <PublicHeader />
+            <ScrollToTop />
+            <Outlet />
+            <FeedbackModal />
+            <Footer />
+        </>
+    );
+};
diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
index eab336533..697a53dc6 100644
--- a/met-web/src/components/common/Layout/index.tsx
+++ b/met-web/src/components/common/Layout/index.tsx
@@ -1,24 +1,28 @@
-import { styled, Box as MuiBox, Theme, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Box, BoxProps, Theme, useMediaQuery, useTheme } from '@mui/material';
 
 const desktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md'));
 const tabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm'));
 
 // A container that decreases its padding on smaller screens
-export const ResponsiveContainer = styled(MuiBox)(({ theme }) => {
-    if (desktopOrLarger(theme)) {
-        return {
-            padding: '1.5em 4.0em',
-        };
-    }
-    if (tabletOrLarger(theme)) {
-        return {
-            padding: '1.5em 2.0em',
-        };
-    }
-    return {
-        padding: '1.5em 1.0em',
-    };
-});
+export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
+    const theme = useTheme();
+    const isDesktopOrLarger = desktopOrLarger(theme);
+    const isTabletOrLarger = tabletOrLarger(theme);
+
+    const horizontalPadding = isDesktopOrLarger ? '4.0em' : isTabletOrLarger ? '2.0em' : '1.0em';
+
+    return (
+        <Box
+            sx={{
+                padding: `1.5em ${horizontalPadding}`,
+            }}
+            {...props}
+        >
+            {props.children}
+        </Box>
+    );
+};
 
 export { Table, TableHead, TableHeadRow, TableHeadCell, TableBody, TableRow, TableCell, TableContainer } from './Table';
 export { DetailsContainer, Detail } from './Details';
diff --git a/met-web/src/components/common/Navigation/Breadcrumb.tsx b/met-web/src/components/common/Navigation/Breadcrumb.tsx
index 32e263694..a4b04b394 100644
--- a/met-web/src/components/common/Navigation/Breadcrumb.tsx
+++ b/met-web/src/components/common/Navigation/Breadcrumb.tsx
@@ -1,7 +1,8 @@
 import { Breadcrumbs } from '@mui/material';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { BodyText } from '../Typography';
 import { Link } from '../Navigation';
+import { Await, UIMatch, useMatches } from 'react-router-dom';
 
 type BreadcrumbProps = {
     name: string;
@@ -33,3 +34,60 @@ export const BreadcrumbTrail: React.FC<{ crumbs: BreadcrumbProps[]; smallScreenO
         </Breadcrumbs>
     );
 };
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface UIMatchWithCrumb
+    extends UIMatch<unknown, { crumb?: (data: unknown) => Promise<{ name: string; link?: string }> }> {}
+
+/**
+ * Automatically generates breadcrumbs based on the `handle.crumb` function of the current route and its parents.
+ * @param smallScreenOnly If true, only displays the breadcrumbs on small screens.
+ * @returns A list of breadcrumbs.
+ */
+export const AutoBreadcrumbs: React.FC<{ smallScreenOnly?: boolean }> = ({ smallScreenOnly }) => {
+    const matches = (useMatches() as UIMatchWithCrumb[]).filter((match) => match.handle?.crumb);
+    return (
+        <Breadcrumbs aria-label="breadcrumb" sx={smallScreenOnly ? { display: { xs: 'block', md: 'none' } } : {}}>
+            {matches.map((match, index) => {
+                const data = match.data as unknown;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const handle = match.handle as {
+                    crumb?: (data: unknown) => Promise<{ name: string; link?: string }>;
+                };
+                if (!handle?.crumb) return null;
+                const crumb = handle.crumb?.(data);
+                return (
+                    <Suspense
+                        fallback={
+                            <BodyText bold size="small">
+                                Loading...
+                            </BodyText>
+                        }
+                    >
+                        <Await resolve={crumb} errorElement={null}>
+                            {(resolvedCrumb) => {
+                                const name = resolvedCrumb?.name;
+                                const link =
+                                    index < matches.length - 1 ? resolvedCrumb?.link ?? match.pathname : undefined;
+                                return link ? (
+                                    <Link size="small" key={name} to={link}>
+                                        {name}
+                                    </Link>
+                                ) : (
+                                    <BodyText
+                                        size="small"
+                                        bold={index == matches.length - 1}
+                                        key={name}
+                                        sx={{ lineHeight: '24px' }}
+                                    >
+                                        {name}
+                                    </BodyText>
+                                );
+                            }}
+                        </Await>
+                    </Suspense>
+                );
+            })}
+        </Breadcrumbs>
+    );
+};
diff --git a/met-web/src/components/layout/Header/InternalHeader.tsx b/met-web/src/components/layout/Header/InternalHeader.tsx
index 14c940a6e..3b8d4a650 100644
--- a/met-web/src/components/layout/Header/InternalHeader.tsx
+++ b/met-web/src/components/layout/Header/InternalHeader.tsx
@@ -41,7 +41,7 @@ const InternalHeader = ({ drawerWidth = 280 }: HeaderProps) => {
             >
                 <CssBaseline />
                 <Toolbar>
-                    <When condition={!isMediumScreen}>
+                    <When condition={!isMediumScreen && drawerWidth}>
                         <IconButton
                             color="info"
                             sx={{
@@ -103,14 +103,14 @@ const InternalHeader = ({ drawerWidth = 280 }: HeaderProps) => {
                             }}
                             sx={{ flexGrow: 1, cursor: 'pointer' }}
                         >
-                            {tenant.title}
+                            {tenant.name}
                         </HeaderTitleOld>
                     ) : (
                         <HeaderTitleOld
                             onClick={() => {
                                 navigate('/home');
                             }}
-                            sx={{ flexGrow: 1, cursor: 'pointer' }}
+                            sx={{ flexGrow: 1, cursor: 'pointer', textTransform: 'capitalize' }}
                         >
                             {tenant.short_name}
                         </HeaderTitleOld>
diff --git a/met-web/src/components/layout/SideNav/SideNav.tsx b/met-web/src/components/layout/SideNav/SideNav.tsx
index 3a4f1b7ea..7d5f69c1e 100644
--- a/met-web/src/components/layout/SideNav/SideNav.tsx
+++ b/met-web/src/components/layout/SideNav/SideNav.tsx
@@ -67,6 +67,7 @@ const DrawerBox = () => {
 };
 
 const SideNav = ({ open, setOpen, isMediumScreen, drawerWidth = 280 }: SideNavProps) => {
+    if (!drawerWidth) return <></>;
     return (
         <>
             {isMediumScreen ? (
diff --git a/met-web/src/routes/AuthenticatedRoutes.tsx b/met-web/src/routes/AuthenticatedRoutes.tsx
index d3f55739d..e124021c6 100644
--- a/met-web/src/routes/AuthenticatedRoutes.tsx
+++ b/met-web/src/routes/AuthenticatedRoutes.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Params, defer, Navigate, Route } from 'react-router-dom';
 import NotFound from './NotFound';
 import EngagementForm from '../components/engagement/form';
 import EngagementListing from '../components/engagement/listing';
@@ -22,81 +22,109 @@ import Unauthorized from './Unauthorized';
 import AuthGate from './AuthGate';
 import { USER_ROLES } from 'services/userService/constants';
 import UserProfile from 'components/userManagement/userDetails';
-import ScrollToTop from 'components/scrollToTop';
 import ReportSettings from 'components/survey/report';
-import FormioListener from 'components/FormioListener';
 import TenantListingPage from 'components/tenantManagement/Listing';
 import TenantCreationPage from 'components/tenantManagement/Create';
 import TenantEditPage from 'components/tenantManagement/Edit';
 import TenantDetail from 'components/tenantManagement/Detail';
 import Language from 'components/language';
+import { Tenant } from 'models/tenant';
+import { getAllTenants, getTenant } from 'services/tenantService';
 
 const AuthenticatedRoutes = () => {
     return (
         <>
-            <ScrollToTop />
-            <FormioListener />
-            <Routes>
-                <Route path="/home" element={<Dashboard />} />
-                <Route path="/engagements" element={<EngagementListing />} />
-                <Route path="/surveys" element={<SurveyListing />} />
-                <Route path="/surveys/create" element={<CreateSurvey />} />
-                <Route path="/surveys/:surveyId/build" element={<SurveyFormBuilder />} />
-                <Route path="/surveys/:surveyId/submit" element={<SurveySubmit />} />
-                <Route path="/surveys/:surveyId/report" element={<ReportSettings />} />
+            <Route path="/home" element={<Dashboard />} />
+            <Route path="/engagements" element={<EngagementListing />} />
+            <Route path="/surveys">
+                <Route index element={<SurveyListing />} />
+                <Route path="create" element={<CreateSurvey />} />
+                <Route path=":surveyId/build" element={<SurveyFormBuilder />} />
+                <Route path=":surveyId/submit" element={<SurveySubmit />} />
+                <Route path=":surveyId/report" element={<ReportSettings />} />
                 <Route element={<AuthGate allowedRoles={[USER_ROLES.VIEW_APPROVED_COMMENTS]} />}>
-                    <Route path="/surveys/:surveyId/comments" element={<CommentReviewListing />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.VIEW_APPROVED_COMMENTS]} />}>
-                    <Route path="/surveys/:surveyId/comments/all" element={<CommentTextListing />} />
+                    <Route path=":surveyId/comments" element={<CommentReviewListing />} />
+                    <Route path=":surveyId/comments/all" element={<CommentTextListing />} />
                 </Route>
                 <Route element={<AuthGate allowedRoles={[USER_ROLES.REVIEW_COMMENTS]} />}>
-                    <Route path="/surveys/:surveyId/submissions/:submissionId/review" element={<CommentReview />} />
+                    <Route path=":surveyId/submissions/:submissionId/review" element={<CommentReview />} />
                 </Route>
+            </Route>
+            <Route path="/engagements">
+                <Route index element={<EngagementListing />} />
                 <Route element={<AuthGate allowedRoles={[USER_ROLES.CREATE_ENGAGEMENT]} />}>
-                    <Route path="/engagements/create/form" element={<EngagementForm />} />
+                    <Route path="create/form" element={<EngagementForm />} />
                 </Route>
                 <Route element={<AuthGate allowedRoles={[USER_ROLES.EDIT_ENGAGEMENT]} />}>
-                    <Route path="/engagements/:engagementId/form" element={<EngagementForm />} />
-                </Route>
-                <Route path="/engagements/:engagementId/view" element={<EngagementView />} />
-                <Route path="/:slug" element={<EngagementView />} />
-                <Route path="/engagements/:engagementId/comments/:dashboardType" element={<EngagementComments />} />
-                <Route path="/:slug/dashboard/:dashboardType" element={<PublicDashboard />} />
-                <Route path="/engagements/:engagementId/dashboard/:dashboardType" element={<PublicDashboard />} />
-                <Route path="/:slug/comments/:dashboardType" element={<EngagementComments />} />
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.MANAGE_METADATA]} />}>
-                    <Route path="/metadatamanagement" element={<MetadataManagement />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.VIEW_LANGUAGES]} />}>
-                    <Route path="/languages" element={<Language />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.SUPER_ADMIN]} />}>
-                    <Route path="/tenantadmin" element={<TenantListingPage />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.SUPER_ADMIN]} />}>
-                    <Route path="/tenantadmin/create" element={<TenantCreationPage />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.SUPER_ADMIN]} />}>
-                    <Route path="/tenantadmin/:tenantId/detail" element={<TenantDetail />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.SUPER_ADMIN]} />}>
-                    <Route path="/tenantadmin/:tenantShortName/edit" element={<TenantEditPage />} />
-                </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.VIEW_FEEDBACKS]} />}>
-                    <Route path="/feedback" element={<FeedbackListing />} />
-                </Route>
-                <Route path="/calendar" element={<UnderConstruction />} />
-                <Route path="/reporting" element={<UnderConstruction />} />
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.VIEW_USERS]} />}>
-                    <Route path="/usermanagement" element={<UserManagementListing />} />
+                    <Route path=":engagementId/form" element={<EngagementForm />} />
                 </Route>
-                <Route element={<AuthGate allowedRoles={[USER_ROLES.VIEW_USERS]} />}>
-                    <Route path="/usermanagement/:userId/details" element={<UserProfile />} />
+                <Route path=":engagementId/view" element={<EngagementView />} />
+                <Route path=":slug" element={<EngagementView />} />
+                <Route path=":engagementId/comments/:dashboardType" element={<EngagementComments />} />
+                <Route path=":slug/dashboard/:dashboardType" element={<PublicDashboard />} />
+                <Route path=":engagementId/dashboard/:dashboardType" element={<PublicDashboard />} />
+                <Route path=":slug/comments/:dashboardType" element={<EngagementComments />} />
+            </Route>
+            <Route path="/metadatamanagement" element={<MetadataManagement />} />
+            <Route path="/languages" element={<Language />} />
+            <Route
+                id="tenant-admin"
+                path="/tenantadmin"
+                errorElement={<NotFound />}
+                loader={async () => {
+                    return defer({ tenants: getAllTenants() });
+                }}
+                handle={{
+                    crumb: () => ({ name: 'Tenant Admin' }),
+                }}
+            >
+                <Route index element={<TenantListingPage />} />
+                <Route
+                    path="create"
+                    element={<TenantCreationPage />}
+                    handle={{
+                        crumb: () => ({ name: 'Create Tenant Instance' }),
+                    }}
+                />
+                <Route
+                    id="tenant"
+                    path=":tenantShortName"
+                    loader={async ({ params }: { params: Params<string> }) => {
+                        const tenant = getTenant(params.tenantShortName ?? '');
+                        return defer({ tenant: tenant });
+                    }}
+                    handle={{
+                        crumb: async (data: { tenant: Promise<Tenant> }) => {
+                            return data.tenant.then((tenant) => {
+                                return {
+                                    link: `/tenantadmin/${tenant.short_name}/detail`,
+                                    name: tenant.name,
+                                };
+                            });
+                        },
+                    }}
+                    errorElement={<NotFound />}
+                >
+                    <Route index element={<Navigate to="detail" />} />
+                    <Route path="detail" element={<TenantDetail />} />
+                    <Route
+                        path="edit"
+                        element={<TenantEditPage />}
+                        handle={{
+                            crumb: () => ({ name: 'Edit Instance' }),
+                        }}
+                    />
                 </Route>
-                <Route path="/unauthorized" element={<Unauthorized />} />
-                <Route path="*" element={<NotFound />} />
-            </Routes>
+            </Route>
+            <Route path="/feedback" element={<FeedbackListing />} />
+            <Route path="/calendar" element={<UnderConstruction />} />
+            <Route path="/reporting" element={<UnderConstruction />} />
+            <Route path="/usermanagement">
+                <Route index element={<UserManagementListing />} />
+                <Route path=":userId/details" element={<UserProfile />} />
+            </Route>
+            <Route path="/unauthorized" element={<Unauthorized />} />
+            <Route path="*" element={<NotFound />} />
         </>
     );
 };
diff --git a/met-web/src/routes/UnauthenticatedRoutes.tsx b/met-web/src/routes/UnauthenticatedRoutes.tsx
index 98fc9efeb..469702818 100644
--- a/met-web/src/routes/UnauthenticatedRoutes.tsx
+++ b/met-web/src/routes/UnauthenticatedRoutes.tsx
@@ -1,18 +1,17 @@
 import SurveySubmit from 'components/survey/submit';
 import EditSurvey from 'components/survey/edit';
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
 import EngagementView from '../components/engagement/view';
 import NotAvailable from './NotAvailable';
-import NotFound from './NotFound';
 import EngagementComments from '../components/engagement/dashboard/comment';
 import PublicDashboard from 'components/publicDashboard';
 import Landing from 'components/landing';
 import ManageSubscription from '../components/engagement/view/widgets/Subscribe/ManageSubscription';
 import { FormCAC } from 'components/FormCAC';
-import ScrollToTop from 'components/scrollToTop';
 import { RedirectLogin } from './RedirectLogin';
 import withLanguageParam from './LanguageParam';
+import { Route } from 'react-router-dom';
+import NotFound from './NotFound';
 
 const ManageSubscriptionWrapper = withLanguageParam(ManageSubscription);
 const EngagementViewWrapper = withLanguageParam(EngagementView);
@@ -26,34 +25,29 @@ const RedirectLoginWrapper = withLanguageParam(RedirectLogin);
 const UnauthenticatedRoutes = () => {
     return (
         <>
-            <ScrollToTop />
-            <Routes>
-                <Route path="/" element={<Landing />} />
-                <Route
-                    path="/engagements/:engagementId/:subscriptionStatus/:scriptionKey/:language"
-                    element={<ManageSubscriptionWrapper />}
-                />
-                <Route path="/engagements/:engagementId/view/:language" element={<EngagementViewWrapper />} />
-                <Route path="/:slug/:language" element={<EngagementViewWrapper />} />
-                <Route
-                    path="/engagements/:engagementId/dashboard/:dashboardType/:language"
-                    element={<PublicDashboardWrapper />}
-                />
-                <Route path="/:slug/dashboard/:dashboardType/:language" element={<PublicDashboardWrapper />} />
-                <Route
-                    path="/engagements/:engagementId/comments/:dashboardType/:language"
-                    element={<EngagementCommentsWrapper />}
-                />
-                <Route path="/:slug/comments/:dashboardType/:language" element={<EngagementCommentsWrapper />} />
-                <Route path="/engagements/:engagementId/edit/:token/:language" element={<EditSurveyWrapper />} />
-                <Route path="/:slug/edit/:token/:language" element={<EditSurveyWrapper />} />
-                <Route path="/surveys/submit/:surveyId/:token/:language" element={<SurveySubmitWrapper />} />
-                <Route path="/engagements/:engagementId/cacform/:widgetId/:language" element={<FormCACWrapper />} />
-                <Route path="/engagements/create/form/:language" element={<RedirectLoginWrapper />} />
-                <Route path="*" element={<NotFound />} />
-                <Route path="/not-found" element={<NotFound />} />
-                <Route path="/not-available" element={<NotAvailable />} />
-            </Routes>
+            <Route path="/" element={<Landing />} />
+            <Route path="/not-available" element={<NotAvailable />} />
+            <Route path="/surveys/submit/:surveyId/:token/:language" element={<SurveySubmitWrapper />} />
+            <Route path="/engagements">
+                <Route path="create/form/:language" element={<RedirectLoginWrapper />} />
+                <Route path=":engagementId">
+                    <Route path="view/:language" element={<EngagementViewWrapper />} />
+                    <Route path="comments/:dashboardType/:language" element={<EngagementCommentsWrapper />} />
+                    <Route path="dashboard/:dashboardType/:language" element={<PublicDashboardWrapper />} />
+                    <Route path="edit/:token/:language" element={<EditSurveyWrapper />} />
+                    <Route path=":subscriptionStatus/:scriptionKey/:language" element={<ManageSubscriptionWrapper />} />
+                    <Route path="form/:language" element={<RedirectLoginWrapper />} />
+                    <Route path="cacform/:widgetId/:language" element={<FormCACWrapper />} />
+                </Route>
+            </Route>
+            <Route path=":slug">
+                <Route path="dashboard/:dashboardType/:language" element={<PublicDashboardWrapper />} />
+                <Route path="comments/:dashboardType/:language" element={<EngagementCommentsWrapper />} />
+                <Route path="edit/:token/:language" element={<EditSurveyWrapper />} />
+                <Route path="cacform/:widgetId/:language" element={<FormCACWrapper />} />
+                <Route path=":language" element={<EngagementViewWrapper />} />
+            </Route>
+            <Route path="*" element={<NotFound />} />
         </>
     );
 };

From c92763bd7db9e4531b1fad04342421f8615f5f23 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 13:55:49 -0700
Subject: [PATCH 03/11] Update changelog

---
 CHANGELOG.MD | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 7d828e4f7..0afee8c3e 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,3 +1,9 @@
+## June 6, 2024
+
+- **Feature** Use createBrowserRouter insead of <BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
+  - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
+  - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component
+
 ## June 3, 2024
 
 - **Bugfix** Patch button styles (follow-up to [🎟️ DESENG-583](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-583))
@@ -7,6 +13,7 @@
 ## May 30, 2024
 
 - **Feature** Remove web components [🎟️ DESENG-616](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-616)
+
   - Removed web components and all code that references it
 
 - **Feature** Remove EAO process widget [🎟️ DESENG-626](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-626)

From 45f46f7e6294d685ea762d5c61c4c6ce571808da Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 13:57:56 -0700
Subject: [PATCH 04/11] update changelog again

---
 CHANGELOG.MD | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 0afee8c3e..94af6cf04 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -3,6 +3,7 @@
 - **Feature** Use createBrowserRouter insead of <BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
   - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
   - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component
+  - Added the AutoBreadcrumbs component to the common components library, which will be used to generate breadcrumbs based on the current route
 
 ## June 3, 2024
 

From 4ddd210e9193128f32e4b15d10e56d7d19db1a12 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 13:58:42 -0700
Subject: [PATCH 05/11] Fix formatting issue

---
 CHANGELOG.MD | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 94af6cf04..cc6fec952 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,6 +1,6 @@
 ## June 6, 2024
 
-- **Feature** Use createBrowserRouter insead of <BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
+- **Feature** Use createBrowserRouter insead of \<BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
   - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
   - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component
   - Added the AutoBreadcrumbs component to the common components library, which will be used to generate breadcrumbs based on the current route

From 3626ce62dc603a4e5bfac136438d7aa153f55fa6 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 14:43:36 -0700
Subject: [PATCH 06/11] are you happy now, sonarcloud?

---
 .../src/components/common/Layout/index.tsx    | 19 ++++++++++++++-----
 .../common/Navigation/Breadcrumb.tsx          |  1 +
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
index 697a53dc6..97edd97da 100644
--- a/met-web/src/components/common/Layout/index.tsx
+++ b/met-web/src/components/common/Layout/index.tsx
@@ -1,16 +1,25 @@
 import React from 'react';
 import { Box, BoxProps, Theme, useMediaQuery, useTheme } from '@mui/material';
 
-const desktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md'));
-const tabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm'));
+const useDesktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md'));
+const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm'));
 
 // A container that decreases its padding on smaller screens
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     const theme = useTheme();
-    const isDesktopOrLarger = desktopOrLarger(theme);
-    const isTabletOrLarger = tabletOrLarger(theme);
+    const isDesktopOrLarger = useDesktopOrLarger(theme);
+    const isTabletOrLarger = useTabletOrLarger(theme);
 
-    const horizontalPadding = isDesktopOrLarger ? '4.0em' : isTabletOrLarger ? '2.0em' : '1.0em';
+    let horizontalPadding;
+    if (isDesktopOrLarger) {
+        horizontalPadding = '4.0em';
+    } else {
+        if (isTabletOrLarger) {
+            horizontalPadding = '2.0em';
+        } else {
+            horizontalPadding = '1.0em';
+        }
+    }
 
     return (
         <Box
diff --git a/met-web/src/components/common/Navigation/Breadcrumb.tsx b/met-web/src/components/common/Navigation/Breadcrumb.tsx
index a4b04b394..155bdb520 100644
--- a/met-web/src/components/common/Navigation/Breadcrumb.tsx
+++ b/met-web/src/components/common/Navigation/Breadcrumb.tsx
@@ -58,6 +58,7 @@ export const AutoBreadcrumbs: React.FC<{ smallScreenOnly?: boolean }> = ({ small
                 const crumb = handle.crumb?.(data);
                 return (
                     <Suspense
+                        key={match.pathname}
                         fallback={
                             <BodyText bold size="small">
                                 Loading...

From 3cb62377759937701ffbb9b984794d5f0aa974b3 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 14:44:06 -0700
Subject: [PATCH 07/11] Breadcrumbs and Blockers and Loaders, oh my!

---
 .../components/tenantManagement/Create.tsx    |  19 +-
 .../components/tenantManagement/Detail.tsx    | 560 +++++++++---------
 .../src/components/tenantManagement/Edit.tsx  | 123 ++--
 .../components/tenantManagement/Listing.tsx   | 131 ++--
 .../tenantManagement/TenantForm.tsx           | 125 ++--
 .../tenantManagement/CreateTenant.test.tsx    |  95 ++-
 .../tenantManagement/EditTenant.test.tsx      | 100 ++--
 .../tenantManagement/TenantDetail.test.tsx    |  82 +--
 .../tenantManagement/TenantListing.test.tsx   |  19 +-
 9 files changed, 657 insertions(+), 597 deletions(-)

diff --git a/met-web/src/components/tenantManagement/Create.tsx b/met-web/src/components/tenantManagement/Create.tsx
index ea3af4a74..56ad2dd12 100644
--- a/met-web/src/components/tenantManagement/Create.tsx
+++ b/met-web/src/components/tenantManagement/Create.tsx
@@ -3,24 +3,26 @@ import React from 'react';
 import { Grid } from '@mui/material';
 import { ResponsiveContainer } from 'components/common/Layout';
 import { Header1, Header2, BodyText } from 'components/common/Typography/';
-import { BreadcrumbTrail } from 'components/common/Navigation';
 import { TenantForm } from './TenantForm';
 import { createTenant } from 'services/tenantService';
 import { SubmitHandler } from 'react-hook-form';
 import { Tenant } from 'models/tenant';
 import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useRevalidator } from 'react-router-dom';
+import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
 
 const TenantCreationPage = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
+    const revalidator = useRevalidator();
 
     const onSubmit: SubmitHandler<Tenant> = async (data) => {
         try {
             await createTenant(data);
             dispatch(openNotification({ text: 'Tenant created successfully!', severity: 'success' }));
-            navigate('../tenantadmin');
+            revalidator.revalidate();
+            navigate('/tenantadmin');
         } catch (error) {
             dispatch(openNotification({ text: 'Unknown error while creating tenant', severity: 'error' }));
             console.error(error);
@@ -28,19 +30,12 @@ const TenantCreationPage = () => {
     };
 
     const onCancel = () => {
-        navigate('../tenantadmin');
+        navigate('/tenantadmin');
     };
 
     return (
         <ResponsiveContainer>
-            <BreadcrumbTrail
-                smallScreenOnly
-                crumbs={[
-                    { name: 'Dashboard', link: '../../home' },
-                    { name: 'Tenant Admin', link: '../tenantadmin' },
-                    { name: 'Create Tenant Instance' },
-                ]}
-            />
+            <AutoBreadcrumbs />
 
             <Header1>Create Tenant Instance</Header1>
             <Grid container spacing={0} direction="column" mb="0.5em">
diff --git a/met-web/src/components/tenantManagement/Detail.tsx b/met-web/src/components/tenantManagement/Detail.tsx
index 5da1c1364..9b3db3f0c 100644
--- a/met-web/src/components/tenantManagement/Detail.tsx
+++ b/met-web/src/components/tenantManagement/Detail.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { Suspense } from 'react';
 import { Box, Grid, Skeleton } from '@mui/material';
 import { Header1, Header2, BodyText } from 'components/common/Typography/';
 import { ResponsiveContainer, DetailsContainer, Detail } from 'components/common/Layout';
-import { useParams, useNavigate } from 'react-router-dom';
-import { getTenant, deleteTenant } from 'services/tenantService';
+import { useNavigate, useRouteLoaderData, Await, useRevalidator } from 'react-router-dom';
+import { deleteTenant } from 'services/tenantService';
 import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
-import { BreadcrumbTrail } from 'components/common/Navigation/Breadcrumb';
+import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
 import { Tenant } from 'models/tenant';
 import { Button } from 'components/common/Input/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -16,145 +16,14 @@ import LandingPageBanner from 'assets/images/LandingPageBanner.png';
 import { globalFocusVisible } from 'components/common';
 
 const TenantDetail = () => {
-    const [tenant, setTenant] = React.useState<Tenant | null>(null);
-    const [loading, setLoading] = React.useState<boolean>(true);
+    const { tenant } = useRouteLoaderData('tenant') as { tenant: Tenant };
     const navigate = useNavigate();
-    const { tenantId } = useParams<{ tenantId: string }>();
     const dispatch = useAppDispatch();
+    const revalidator = useRevalidator();
     const penToSquareIcon = <FontAwesomeIcon icon={faPenToSquare} />;
     const trashCanIcon = <FontAwesomeIcon icon={faTrashCan} />;
     const faCopyIcon = <FontAwesomeIcon icon={faCopy} style={{ color: '#063064', marginLeft: '2px' }} />;
 
-    useEffect(() => {
-        if (!tenantId) {
-            return;
-        }
-        const fetchTenant = () => {
-            getTenant(tenantId)
-                .then((returnedTenant) => {
-                    setTenant(returnedTenant);
-                    setLoading(false);
-                })
-                .catch((error) => {
-                    dispatch(openNotification({ text: error.message, severity: 'error' }));
-                    setLoading(false);
-                });
-        };
-        fetchTenant();
-    }, [tenantId, dispatch]);
-
-    if (loading || !tenant) {
-        return (
-            <ResponsiveContainer>
-                <BreadcrumbTrail
-                    smallScreenOnly
-                    crumbs={[
-                        { name: 'Dashboard', link: '../home' },
-                        { name: 'Tenant Admin', link: '../tenantadmin' },
-                        { name: 'Loading...' },
-                    ]}
-                />
-                <Skeleton variant="text" width="40%">
-                    <Header1>Loading...</Header1>
-                </Skeleton>
-                <Grid container spacing={0} direction="row" mb="0.5em">
-                    <Grid item xs={12} sm={7} lg={9}>
-                        <Skeleton variant="text" width="60%">
-                            <Header2 decorated>Loading...</Header2>
-                        </Skeleton>
-                    </Grid>
-                    <Grid item xs="auto" sm={5} lg={3} sx={{ textAlign: 'right' }}>
-                        <Skeleton variant="rectangular" height={36} width={100} />
-                    </Grid>
-                </Grid>
-                <Box
-                    style={{
-                        display: 'block',
-                        overflowX: 'auto',
-                        width: 'calc(100% + 4px)',
-                        padding: '0px 2px 2px',
-                        margin: '0px -2px -2px',
-                    }}
-                >
-                    <DetailsContainer
-                        sx={{
-                            margin: {
-                                xs: '0 -16px',
-                                sm: '0',
-                            },
-                        }}
-                    >
-                        <Detail>
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                        </Detail>
-
-                        <Detail>
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                        </Detail>
-
-                        <Detail>
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                        </Detail>
-
-                        <Detail>
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                        </Detail>
-
-                        <Detail>
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                        </Detail>
-
-                        <Detail>
-                            <Skeleton variant="rectangular" height={166} width="100%" />
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="40%">
-                                <BodyText bold>Loading...</BodyText>
-                            </Skeleton>
-                            <Skeleton variant="text" width="80%">
-                                <BodyText>Loading...</BodyText>
-                            </Skeleton>
-                        </Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <Skeleton variant="rectangular" height={36} width={100} />
-                            </Grid>
-                        </Grid>
-                    </DetailsContainer>
-                </Box>
-            </ResponsiveContainer>
-        );
-    }
-
     const handleDeleteTenant = async (tenantId: string) => {
         try {
             await deleteTenant(tenantId);
@@ -164,7 +33,8 @@ const TenantDetail = () => {
                     text: `Tenant "${tenantId}" successfully deleted`,
                 }),
             );
-            navigate('../tenantadmin');
+            revalidator.revalidate();
+            navigate('/tenantadmin');
         } catch (error) {
             console.log(error);
             dispatch(
@@ -204,173 +74,277 @@ const TenantDetail = () => {
     };
 
     return (
-        <ResponsiveContainer>
-            <BreadcrumbTrail
-                smallScreenOnly
-                crumbs={[
-                    { name: 'Dashboard', link: '../home' },
-                    { name: 'Tenant Admin', link: '../tenantadmin' },
-                    { name: tenant.name ? tenant.name : tenant.title },
-                ]}
-            />
-            <Header1>{tenant.name}</Header1>
-            <Grid container spacing={0} direction="row" mb="0.5em">
-                <Grid item xs={12} sm={7} lg={9}>
-                    <Header2 decorated>Tenant Details</Header2>
-                </Grid>
-                <Grid item xs="auto" sm={5} lg={3} sx={{ textAlign: 'right' }}>
-                    <Button
-                        variant="primary"
-                        icon={penToSquareIcon}
-                        onClick={() => {
-                            navigate(`/tenantadmin/${tenant.short_name}/edit`);
+        <Suspense
+            fallback={
+                <ResponsiveContainer>
+                    <AutoBreadcrumbs />
+                    <Skeleton variant="text" width="40%">
+                        <Header1>Loading...</Header1>
+                    </Skeleton>
+                    <Grid container spacing={0} direction="row" mb="0.5em">
+                        <Grid item xs={12} sm={7} lg={9}>
+                            <Skeleton variant="text" width="60%">
+                                <Header2 decorated>Loading...</Header2>
+                            </Skeleton>
+                        </Grid>
+                        <Grid item xs="auto" sm={5} lg={3} sx={{ textAlign: 'right' }}>
+                            <Skeleton variant="rectangular" height={36} width={100} />
+                        </Grid>
+                    </Grid>
+                    <Box
+                        style={{
+                            display: 'block',
+                            overflowX: 'auto',
+                            width: 'calc(100% + 4px)',
+                            padding: '0px 2px 2px',
+                            margin: '0px -2px -2px',
                         }}
                     >
-                        Edit
-                    </Button>
-                </Grid>
-            </Grid>
-            <Box
-                style={{
-                    // Allow the table to scroll horizontally
-                    display: 'block',
-                    overflowX: 'auto',
-                    // Allow the keyboard focus outline on table rows to
-                    // display outside the scrollable area
-                    width: 'calc(100% + 4px)',
-                    padding: '0px 2px 2px',
-                    margin: '0px -2px -2px',
-                }}
-            >
-                <DetailsContainer
-                    sx={{
-                        margin: {
-                            // on small screens, negate the padding of the ResponsiveContainer
-                            // so the container hugs the edge of the screen
-                            xs: '0 -16px',
-                            sm: '0',
-                        },
-                    }}
-                >
-                    <Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <BodyText bold>Tenant Instance Name</BodyText>
-                                <BodyText>{tenant.name}</BodyText>
-                            </Grid>
-                        </Grid>
-                    </Detail>
+                        <DetailsContainer
+                            sx={{
+                                margin: {
+                                    xs: '0 -16px',
+                                    sm: '0',
+                                },
+                            }}
+                        >
+                            <Detail>
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                            </Detail>
 
-                    <Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <BodyText bold>Primary Contact</BodyText>
-                                <Grid container alignItems="center">
-                                    <Grid item xs>
-                                        <BodyText>{tenant.contact_name}</BodyText>
-                                    </Grid>
-                                    <Grid
-                                        item
-                                        xs="auto"
-                                        component={'a'}
-                                        tabIndex={0}
-                                        target="#"
-                                        sx={{
-                                            cursor: 'pointer',
-                                            display: { xs: 'none', sm: 'block' },
-                                            ...globalFocusVisible,
-                                        }}
-                                        onClick={copyEmail}
-                                        onKeyDown={(e: React.KeyboardEvent<HTMLAnchorElement>) => {
-                                            if (e.key === 'Enter' || e.key === ' ') {
-                                                e.preventDefault();
-                                                copyEmail();
-                                            }
-                                        }}
-                                    >
-                                        <BodyText>
-                                            {tenant.contact_email} {faCopyIcon}
-                                        </BodyText>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Detail>
+                            <Detail>
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                            </Detail>
 
-                    <Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <BodyText bold>Short Name</BodyText>
-                                <BodyText>{tenant.short_name}</BodyText>
-                            </Grid>
-                        </Grid>
-                    </Detail>
+                            <Detail>
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                            </Detail>
 
-                    <Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <BodyText bold>Hero Banner Title</BodyText>
-                                <BodyText>{tenant.title}</BodyText>
-                            </Grid>
-                        </Grid>
-                    </Detail>
+                            <Detail>
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                            </Detail>
 
-                    <Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <BodyText bold>Hero Banner Description</BodyText>
-                                <BodyText>{tenant.description}</BodyText>
-                            </Grid>
-                        </Grid>
-                    </Detail>
+                            <Detail>
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                            </Detail>
 
-                    <Detail>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <BodyText bold>Hero Banner Image</BodyText>
-                                <div
-                                    style={{
-                                        height: '166px',
-                                        alignSelf: 'stretch',
-                                        margin: '16px 0',
-                                        backgroundImage: `url(${tenant.logo_url || LandingPageBanner})`,
-                                        backgroundSize: 'cover',
-                                        backgroundPosition: 'center',
-                                    }}
-                                />
-                            </Grid>
-                            {tenant.logo_credit && (
+                            <Detail>
+                                <Skeleton variant="rectangular" height={166} width="100%" />
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="40%">
+                                    <BodyText bold>Loading...</BodyText>
+                                </Skeleton>
+                                <Skeleton variant="text" width="80%">
+                                    <BodyText>Loading...</BodyText>
+                                </Skeleton>
+                            </Detail>
+                            <Grid container spacing={2}>
                                 <Grid item xs={12}>
-                                    <BodyText bold>Photo Credit</BodyText>
-                                    <BodyText>{tenant.logo_credit}</BodyText>
+                                    <Skeleton variant="rectangular" height={36} width={100} />
                                 </Grid>
-                            )}
-                            {tenant.logo_description && (
-                                <Grid item xs={12}>
-                                    <BodyText bold>Description</BodyText>
-                                    <BodyText>{tenant.logo_description}</BodyText>
-                                </Grid>
-                            )}
+                            </Grid>
+                        </DetailsContainer>
+                    </Box>
+                </ResponsiveContainer>
+            }
+        >
+            <Await resolve={tenant}>
+                {(resolvedTenant) => (
+                    <ResponsiveContainer>
+                        <AutoBreadcrumbs />
+                        <Header1>{resolvedTenant.name}</Header1>
+                        <Grid container spacing={0} direction="row" mb="0.5em">
+                            <Grid item xs={12} sm={7} lg={9}>
+                                <Header2 decorated>Tenant Details</Header2>
+                            </Grid>
+                            <Grid item xs="auto" sm={5} lg={3} sx={{ textAlign: 'right' }}>
+                                <Button
+                                    variant="primary"
+                                    icon={penToSquareIcon}
+                                    onClick={() => {
+                                        navigate(`/tenantadmin/${resolvedTenant.short_name}/edit`);
+                                    }}
+                                >
+                                    Edit
+                                </Button>
+                            </Grid>
                         </Grid>
-                    </Detail>
-                    <Grid container spacing={2}>
-                        <Grid item xs={12}>
-                            <Button
-                                variant="secondary"
-                                color="danger"
-                                icon={trashCanIcon}
-                                onClick={() => {
-                                    handleDeleteClick(tenant);
+                        <Box
+                            style={{
+                                // Allow the table to scroll horizontally
+                                display: 'block',
+                                overflowX: 'auto',
+                                // Allow the keyboard focus outline on table rows to
+                                // display outside the scrollable area
+                                width: 'calc(100% + 4px)',
+                                padding: '0px 2px 2px',
+                                margin: '0px -2px -2px',
+                            }}
+                        >
+                            <DetailsContainer
+                                sx={{
+                                    margin: {
+                                        // on small screens, negate the padding of the ResponsiveContainer
+                                        // so the container hugs the edge of the screen
+                                        xs: '0 -16px',
+                                        sm: '0',
+                                    },
                                 }}
-                                sx={{ marginTop: '20px' }}
                             >
-                                Delete Tenant Instance
-                            </Button>
-                        </Grid>
-                    </Grid>
-                </DetailsContainer>
-            </Box>
-        </ResponsiveContainer>
+                                <Detail>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <BodyText bold>Tenant Instance Name</BodyText>
+                                            <BodyText>{resolvedTenant.name}</BodyText>
+                                        </Grid>
+                                    </Grid>
+                                </Detail>
+
+                                <Detail>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <BodyText bold>Primary Contact</BodyText>
+                                            <Grid container alignItems="center">
+                                                <Grid item xs>
+                                                    <BodyText>{resolvedTenant.contact_name}</BodyText>
+                                                </Grid>
+                                                <Grid
+                                                    item
+                                                    xs="auto"
+                                                    component={'a'}
+                                                    tabIndex={0}
+                                                    target="#"
+                                                    sx={{
+                                                        cursor: 'pointer',
+                                                        display: { xs: 'none', sm: 'block' },
+                                                        ...globalFocusVisible,
+                                                    }}
+                                                    onClick={copyEmail}
+                                                    onKeyDown={(e: React.KeyboardEvent<HTMLAnchorElement>) => {
+                                                        if (e.key === 'Enter' || e.key === ' ') {
+                                                            e.preventDefault();
+                                                            copyEmail();
+                                                        }
+                                                    }}
+                                                >
+                                                    <BodyText>
+                                                        {resolvedTenant.contact_email} {faCopyIcon}
+                                                    </BodyText>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Detail>
+
+                                <Detail>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <BodyText bold>Short Name</BodyText>
+                                            <BodyText>{resolvedTenant.short_name}</BodyText>
+                                        </Grid>
+                                    </Grid>
+                                </Detail>
+
+                                <Detail>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <BodyText bold>Hero Banner Title</BodyText>
+                                            <BodyText>{resolvedTenant.title}</BodyText>
+                                        </Grid>
+                                    </Grid>
+                                </Detail>
+
+                                <Detail>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <BodyText bold>Hero Banner Description</BodyText>
+                                            <BodyText>{resolvedTenant.description}</BodyText>
+                                        </Grid>
+                                    </Grid>
+                                </Detail>
+
+                                <Detail>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <BodyText bold>Hero Banner Image</BodyText>
+                                            <div
+                                                style={{
+                                                    height: '166px',
+                                                    alignSelf: 'stretch',
+                                                    margin: '16px 0',
+                                                    backgroundImage: `url(${
+                                                        resolvedTenant.logo_url || LandingPageBanner
+                                                    })`,
+                                                    backgroundSize: 'cover',
+                                                    backgroundPosition: 'center',
+                                                }}
+                                            />
+                                        </Grid>
+                                        {resolvedTenant.logo_credit && (
+                                            <Grid item xs={12}>
+                                                <BodyText bold>Photo Credit</BodyText>
+                                                <BodyText>{resolvedTenant.logo_credit}</BodyText>
+                                            </Grid>
+                                        )}
+                                        {resolvedTenant.logo_description && (
+                                            <Grid item xs={12}>
+                                                <BodyText bold>Description</BodyText>
+                                                <BodyText>{resolvedTenant.logo_description}</BodyText>
+                                            </Grid>
+                                        )}
+                                    </Grid>
+                                </Detail>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Button
+                                            variant="secondary"
+                                            color="danger"
+                                            icon={trashCanIcon}
+                                            onClick={() => {
+                                                handleDeleteClick(resolvedTenant);
+                                            }}
+                                            sx={{ marginTop: '20px' }}
+                                        >
+                                            Delete Tenant Instance
+                                        </Button>
+                                    </Grid>
+                                </Grid>
+                            </DetailsContainer>
+                        </Box>
+                    </ResponsiveContainer>
+                )}
+            </Await>
+        </Suspense>
     );
 };
 
diff --git a/met-web/src/components/tenantManagement/Edit.tsx b/met-web/src/components/tenantManagement/Edit.tsx
index 301e1580f..68e5005fe 100644
--- a/met-web/src/components/tenantManagement/Edit.tsx
+++ b/met-web/src/components/tenantManagement/Edit.tsx
@@ -1,92 +1,71 @@
-import React, { useEffect } from 'react';
+import React, { Suspense } from 'react';
 
 import { Grid } from '@mui/material';
 import { ResponsiveContainer } from 'components/common/Layout';
 import { Header1, Header2, BodyText } from 'components/common/Typography/';
-import { BreadcrumbTrail } from 'components/common/Navigation';
 import { TenantForm } from './TenantForm';
-import { updateTenant, getTenant } from 'services/tenantService';
+import { updateTenant } from 'services/tenantService';
 import { SubmitHandler } from 'react-hook-form';
 import { Tenant } from 'models/tenant';
 import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
-import { useNavigate, useParams } from 'react-router-dom';
-import NotFound from 'routes/NotFound';
+import { useRouteLoaderData, useNavigate, Await, useRevalidator } from 'react-router-dom';
 import { MidScreenLoader } from 'components/common';
+import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
 
 const TenantEditPage = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
-    const { tenantShortName: shortName } = useParams<{ tenantShortName: string }>();
-    const [tenant, setTenant] = React.useState<Tenant>();
-    const [loading, setLoading] = React.useState<boolean>(true);
-
-    useEffect(() => {
-        const fetchTenant = async () => {
-            if (!shortName) {
-                setLoading(false);
-                return;
-            }
-            try {
-                const tenant = await getTenant(shortName);
-                setTenant(tenant);
-                setLoading(false);
-            } catch (error) {
-                setLoading(false);
-            }
-        };
-
-        fetchTenant();
-    }, [shortName, dispatch]);
-
-    if (loading) {
-        return <MidScreenLoader />;
-    }
-
-    if (!tenant || !shortName) {
-        return <NotFound />;
-    }
-
-    const onSubmit: SubmitHandler<Tenant> = async (data) => {
-        try {
-            await updateTenant(data, shortName);
-            dispatch(openNotification({ text: 'Tenant updated successfully!', severity: 'success' }));
-            navigate(`../tenantadmin/${shortName}/detail`);
-        } catch (error) {
-            dispatch(openNotification({ text: 'Unknown error while saving tenant', severity: 'error' }));
-            console.error(error);
-        }
-    };
-
-    const onCancel = () => {
-        navigate(`../tenantadmin/${shortName}/detail`);
-    };
+    const revalidator = useRevalidator();
+    const { tenant } = useRouteLoaderData('tenant') as { tenant: Tenant };
 
     return (
-        <ResponsiveContainer>
-            <BreadcrumbTrail
-                smallScreenOnly
-                crumbs={[
-                    { name: 'Dashboard', link: '../../home' },
-                    { name: 'Tenant Admin', link: '../tenantadmin' },
-                    { name: tenant.name ?? 'Tenant', link: `../tenantadmin/${tenant.short_name}/detail` },
-                    { name: 'Edit Instance' },
-                ]}
-            />
+        <Suspense fallback={<MidScreenLoader />}>
+            <Await resolve={tenant}>
+                {(resolvedTenant) => {
+                    const shortName = resolvedTenant?.short_name;
+                    const onCancel = () => {
+                        navigate(`/tenantadmin/${shortName}/detail`);
+                    };
+                    const onSubmit: SubmitHandler<Tenant> = async (data) => {
+                        try {
+                            await updateTenant(data, shortName);
+                            dispatch(openNotification({ text: 'Tenant updated successfully!', severity: 'success' }));
+                            revalidator.revalidate();
+                            navigate(`/tenantadmin/${shortName}/detail`);
+                        } catch (error) {
+                            dispatch(
+                                openNotification({ text: 'Unknown error while saving tenant', severity: 'error' }),
+                            );
+                            console.error(error);
+                        }
+                    };
+                    return (
+                        <ResponsiveContainer>
+                            <AutoBreadcrumbs />
 
-            <Header1>Edit Tenant Instance</Header1>
-            <Grid container spacing={0} direction="column" mb="0.5em">
-                <Grid item xs={12}>
-                    <Header2 decorated sx={{ mb: 0 }}>
-                        Tenant Details
-                    </Header2>
-                </Grid>
-                <Grid item xs={12}>
-                    <BodyText size="small">* Required fields</BodyText>
-                </Grid>
-            </Grid>
-            <TenantForm initialTenant={tenant} onSubmit={onSubmit} submitText="Update" onCancel={onCancel} />
-        </ResponsiveContainer>
+                            <Header1>Edit Tenant Instance</Header1>
+                            <Grid container spacing={0} direction="column" mb="0.5em">
+                                <Grid item xs={12}>
+                                    <Header2 decorated sx={{ mb: 0 }}>
+                                        Tenant Details
+                                    </Header2>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <BodyText size="small">* Required fields</BodyText>
+                                </Grid>
+                            </Grid>
+                            <TenantForm
+                                initialTenant={resolvedTenant}
+                                onSubmit={onSubmit}
+                                submitText="Update"
+                                onCancel={onCancel}
+                            />
+                        </ResponsiveContainer>
+                    );
+                }}
+            </Await>
+        </Suspense>
     );
 };
 
diff --git a/met-web/src/components/tenantManagement/Listing.tsx b/met-web/src/components/tenantManagement/Listing.tsx
index bea58e5f2..d489ce0fa 100644
--- a/met-web/src/components/tenantManagement/Listing.tsx
+++ b/met-web/src/components/tenantManagement/Listing.tsx
@@ -13,48 +13,32 @@ import {
     TableHeadRow,
     TableRow,
 } from 'components/common/Layout/Table';
-import { getAllTenants } from 'services/tenantService';
 
-import React, { useEffect } from 'react';
+import React, { Suspense } from 'react';
 import { Tenant } from 'models/tenant';
-import { Else, If, Then } from 'react-if';
-import { BreadcrumbTrail } from 'components/common/Navigation/Breadcrumb';
-import { useAppDispatch } from 'hooks';
-import { openNotification } from 'services/notificationService/notificationSlice';
-import { useNavigate } from 'react-router-dom';
+import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
+import { Await, useNavigate, useRouteLoaderData } from 'react-router-dom';
 
 const TenantListingPage = () => {
-    const [tenants, setTenants] = React.useState<Tenant[]>([]);
-    const [loading, setLoading] = React.useState<boolean>(true);
-    const dispatch = useAppDispatch();
     const navigate = useNavigate();
     const circlePlusIcon = <FontAwesomeIcon icon={faPlus} />;
-    useEffect(() => {
-        const fetchTenants = () => {
-            getAllTenants()
-                .then((returnedTenants) => {
-                    setTenants(returnedTenants);
-                    setLoading(false);
-                })
-                .catch((error) => {
-                    dispatch(openNotification({ text: error.message, severity: 'error' }));
-                    setLoading(false);
-                });
-        };
-        fetchTenants();
-    }, []);
+    const { tenants } = useRouteLoaderData('tenant-admin') as { tenants: Tenant[] };
 
     return (
         <ResponsiveContainer>
-            <BreadcrumbTrail
-                smallScreenOnly
-                crumbs={[{ name: 'Dashboard', link: '../home' }, { name: 'Tenant Admin' }]}
-            />
+            <AutoBreadcrumbs />
 
             <Header1>Tenant Admin</Header1>
             <Grid container spacing={0} direction="row" mb="0.5em">
                 <Grid item xs={12} sm={7} lg={9}>
-                    <Header2 decorated>Tenant Instances {!loading && `(${tenants.length})`}</Header2>
+                    <Header2 decorated>
+                        Tenant Instances{' '}
+                        <Suspense fallback={<span />}>
+                            <Await resolve={tenants}>
+                                {(resolvedTenants) => <span>({resolvedTenants.length})</span>}
+                            </Await>
+                        </Suspense>
+                    </Header2>
                 </Grid>
                 <Grid item xs="auto" sm={5} lg={3} sx={{ textAlign: 'right' }}>
                     <Button
@@ -88,48 +72,53 @@ const TenantListingPage = () => {
                         </TableHeadRow>
                     </TableHead>
                     <TableBody>
-                        <If condition={loading}>
-                            <Then>
-                                {[...Array(5)].map((_, index) => (
-                                    <TableRow key={index}>
-                                        <TableCell>
-                                            <Skeleton variant="text" width={240} />
-                                            <Skeleton variant="text" width={240} />
-                                        </TableCell>
-                                        <TableCell>
-                                            <Skeleton variant="text" width={480} />
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </Then>
-                            <Else>
-                                {tenants.map((tenant) => (
-                                    <TableRow
-                                        onClick={() => {
-                                            navigate(`/tenantadmin/${tenant.short_name}/detail`);
-                                        }}
-                                        onKeyDown={(event) => {
-                                            if (event.key === 'Enter' || event.key === ' ') {
-                                                event.preventDefault();
-                                                navigate(`/tenantadmin/${tenant.short_name}/detail`);
-                                            }
-                                        }}
-                                        key={tenant.name}
-                                        tabIndex={0}
-                                    >
-                                        <TableCell>
-                                            <BodyText bold style={{ marginBottom: '8px' }}>
-                                                {tenant.name}
-                                            </BodyText>
-                                            <BodyText size="small">{tenant.contact_name}</BodyText>
-                                        </TableCell>
-                                        <TableCell>
-                                            <BodyText size="small">{tenant.description}</BodyText>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </Else>
-                        </If>
+                        <Suspense
+                            fallback={[...Array(5)].map((_, index) => (
+                                <TableRow key={index}>
+                                    <TableCell>
+                                        <Skeleton variant="text" width={240} />
+                                        <Skeleton variant="text" width={240} />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Skeleton variant="text" width={480} />
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        >
+                            <Await resolve={tenants} errorElement={<p>Could not load tenants</p>}>
+                                {(resolvedTenants) => (
+                                    <>
+                                        {resolvedTenants.map((tenant: Tenant) => {
+                                            return (
+                                                <TableRow
+                                                    onClick={() => {
+                                                        navigate(`/tenantadmin/${tenant.short_name}/detail`);
+                                                    }}
+                                                    onKeyDown={(event) => {
+                                                        if (event.key === 'Enter' || event.key === ' ') {
+                                                            event.preventDefault();
+                                                            navigate(`/tenantadmin/${tenant.short_name}/detail`);
+                                                        }
+                                                    }}
+                                                    key={tenant.name}
+                                                    tabIndex={0}
+                                                >
+                                                    <TableCell>
+                                                        <BodyText bold style={{ marginBottom: '8px' }}>
+                                                            {tenant.name}
+                                                        </BodyText>
+                                                        <BodyText size="small">{tenant.contact_name}</BodyText>
+                                                    </TableCell>
+                                                    <TableCell>
+                                                        <BodyText size="small">{tenant.description}</BodyText>
+                                                    </TableCell>
+                                                </TableRow>
+                                            );
+                                        })}
+                                    </>
+                                )}
+                            </Await>
+                        </Suspense>
                     </TableBody>
                 </Table>
             </Box>
diff --git a/met-web/src/components/tenantManagement/TenantForm.tsx b/met-web/src/components/tenantManagement/TenantForm.tsx
index f5c49504b..6a6513c09 100644
--- a/met-web/src/components/tenantManagement/TenantForm.tsx
+++ b/met-web/src/components/tenantManagement/TenantForm.tsx
@@ -8,7 +8,7 @@ import { Tenant } from 'models/tenant';
 import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import { saveObject } from 'services/objectStorageService';
 import { UploadGuidelines } from 'components/imageUpload/UploadGuidelines';
-import { getAllTenants } from 'services/tenantService';
+import { Await, useRouteLoaderData, useBlocker } from 'react-router-dom';
 import { useAppDispatch } from 'hooks';
 import { openNotificationModal } from 'services/notificationModalService/notificationModalSlice';
 
@@ -27,14 +27,8 @@ export const TenantForm = ({
 }) => {
     const [bannerImage, setBannerImage] = useState<File | null>();
     const [savedBannerImageFileName, setSavedBannerImageFileName] = useState(initialTenant?.logo_url ?? '');
-    const [tenantShortNames, setTenantShortNames] = useState<string[]>([]);
     const dispatch = useAppDispatch();
-
-    useEffect(() => {
-        getAllTenants().then((tenants) =>
-            setTenantShortNames(tenants.map((tenant) => tenant.short_name.toLowerCase())),
-        );
-    }, []);
+    const { tenants } = useRouteLoaderData('tenant-admin') as { tenants: Tenant[] };
 
     const { handleSubmit, formState, control, reset, setValue, watch } = useForm<Tenant>({
         defaultValues: {
@@ -53,7 +47,34 @@ export const TenantForm = ({
         mode: 'onBlur',
         reValidateMode: 'onChange',
     });
-    const { isDirty, isValid, errors } = formState;
+    const { isDirty, isSubmitted, isValid, errors } = formState;
+
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            isDirty && !isSubmitted && nextLocation.pathname !== currentLocation.pathname,
+    );
+
+    useEffect(() => {
+        if (blocker.state === 'blocked') {
+            dispatch(
+                openNotificationModal({
+                    open: true,
+                    data: {
+                        style: 'warning',
+                        header: 'Unsaved Changes',
+                        subHeader:
+                            'If you leave this page, your changes will not be saved. Are you sure you want to leave this page?',
+                        subText: [],
+                        confirmButtonText: 'Leave',
+                        cancelButtonText: 'Stay',
+                        handleConfirm: blocker.proceed,
+                        handleClose: blocker.reset,
+                    },
+                    type: 'confirm',
+                }),
+            );
+        }
+    }, [blocker, dispatch]);
 
     const hasLogoUrl = watch('logo_url');
 
@@ -114,29 +135,6 @@ export const TenantForm = ({
         }
     };
 
-    const handleCancelAttempt = () => {
-        if (isDirty) {
-            dispatch(
-                openNotificationModal({
-                    open: true,
-                    data: {
-                        style: 'warning',
-                        header: 'Unsaved Changes',
-                        subHeader:
-                            'If you leave this page, your changes will not be saved. Are you sure you want to leave this page?',
-                        subText: [],
-                        confirmButtonText: 'Leave',
-                        cancelButtonText: 'Stay',
-                        handleConfirm: onCancel,
-                    },
-                    type: 'confirm',
-                }),
-            );
-        } else {
-            onCancel?.();
-        }
-    };
-
     const handleKeys = (event: React.KeyboardEvent) => {
         // Handle as many key combinations as possible
         if ((event.ctrlKey || event.metaKey || event.altKey) && event.key === 'Enter') {
@@ -226,34 +224,43 @@ export const TenantForm = ({
                     />
                 </Detail>
                 <Detail>
-                    <Controller
-                        name="short_name"
-                        control={control}
-                        rules={{
-                            required: true,
-                            pattern: { value: /^[a-zA-Z0-9_-]+$/, message: 'Your input contains invalid symbols' },
-                            validate: (value) =>
-                                tenantShortNames.includes(value.toLowerCase()) &&
-                                value.toLowerCase() !== initialTenant?.short_name.toLowerCase()
-                                    ? 'This short name is already in use'
-                                    : true,
-                        }}
-                        render={({ field }) => (
-                            <TextField
-                                {...field}
-                                required
-                                error={errors.short_name?.message}
-                                title="Tenant Short Name (URL)"
-                                instructions="Must be unique. Letters, underscores and dashes only are permitted."
-                                placeholder="shortname"
-                                startAdornment={
-                                    <BodyText bold sx={{ mr: '-8px' }}>
-                                        met.gov.bc.ca/
-                                    </BodyText>
-                                }
+                    <Await resolve={tenants}>
+                        {(resolvedTenants: Tenant[]) => (
+                            <Controller
+                                name="short_name"
+                                control={control}
+                                rules={{
+                                    required: true,
+                                    pattern: {
+                                        value: /^[a-zA-Z0-9_-]+$/,
+                                        message: 'Your input contains invalid symbols',
+                                    },
+                                    validate: (value) =>
+                                        resolvedTenants
+                                            .map((tenant) => tenant.short_name)
+                                            .includes(value.toLowerCase()) &&
+                                        value.toLowerCase() !== initialTenant?.short_name.toLowerCase()
+                                            ? 'This short name is already in use'
+                                            : true,
+                                }}
+                                render={({ field }) => (
+                                    <TextField
+                                        {...field}
+                                        required
+                                        error={errors.short_name?.message}
+                                        title="Tenant Short Name (URL)"
+                                        instructions="Must be unique. Letters, underscores and dashes only are permitted."
+                                        placeholder="shortname"
+                                        startAdornment={
+                                            <BodyText bold sx={{ mr: '-8px' }}>
+                                                met.gov.bc.ca/
+                                            </BodyText>
+                                        }
+                                    />
+                                )}
                             />
                         )}
-                    />
+                    </Await>
                 </Detail>
                 <Detail>
                     <Controller
@@ -376,7 +383,7 @@ export const TenantForm = ({
                         {submitText}
                     </Button>
                     {onCancel && (
-                        <Button variant="secondary" onClick={handleCancelAttempt}>
+                        <Button variant="secondary" onClick={onCancel}>
                             {cancelText}
                         </Button>
                     )}
diff --git a/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx b/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx
index f30facee7..f325722a8 100644
--- a/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx
+++ b/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx
@@ -4,8 +4,11 @@ import '@testing-library/jest-dom';
 import * as reactRedux from 'react-redux';
 import * as reactRouter from 'react-router';
 import * as tenantService from 'services/tenantService';
+import * as reactRouterDom from 'react-router-dom';
 import TenantCreationPage from 'components/tenantManagement/Create';
 import { USER_ROLES } from 'services/userService/constants';
+import { RouterProvider, createMemoryRouter, useRouteLoaderData } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
 
 const mockTenant = {
     id: 1,
@@ -20,6 +23,21 @@ const mockTenant = {
     logo_description: 'Logo Description One',
 };
 
+global['Request'] = jest.fn().mockImplementation(() => ({
+    signal: {
+        removeEventListener: () => {},
+        addEventListener: () => {},
+    },
+}));
+
+jest.mock('react', () => ({
+    //this makes the suspense component render its children immediately
+    ...jest.requireActual('react'),
+    Suspense: jest.fn(({ children, fallback }: { children: ReactNode; fallback: ReactNode }) => {
+        return children;
+    }),
+}));
+
 jest.mock('axios');
 
 jest.mock('@mui/material', () => ({
@@ -53,16 +71,30 @@ jest.mock('react-redux', () => ({
 
 const navigate = jest.fn();
 
+let shouldBlockNavigation: any;
+const blockerReset = jest.fn();
+const blockerProceed = jest.fn();
+const blocker = {
+    state: 'unblocked',
+    reset: blockerReset,
+    proceed: blockerProceed,
+};
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     useParams: jest.fn(() => {
         return { tenantShortName: mockTenant.short_name };
     }),
     useNavigate: jest.fn(() => navigate),
+    useRouteLoaderData: jest.fn(() => ({
+        tenants: [mockTenant],
+    })),
+    useBlocker: jest.fn((fn) => {
+        shouldBlockNavigation = fn;
+        return blocker;
+    }),
 }));
 
 jest.mock('services/tenantService', () => ({
-    getAllTenants: jest.fn(),
     createTenant: jest.fn(),
 }));
 
@@ -77,12 +109,23 @@ jest.mock('services/notificationModalService/notificationModalSlice', () => ({
     }),
 }));
 
-// Mocking BreadcrumbTrail component
+// Mocking AutoBreadcrumbs component
 jest.mock('components/common/Navigation/Breadcrumb', () => ({
-    BreadcrumbTrail: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    AutoBreadcrumbs: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }));
 
-describe('Tenant Detail Page tests', () => {
+const router = createMemoryRouter(
+    [
+        {
+            path: '/tenantadmin/create',
+            element: <TenantCreationPage />,
+            id: 'tenant',
+        },
+    ],
+    { initialEntries: ['/tenantadmin/create'] },
+);
+
+describe('Tenant Creation Page tests', () => {
     const dispatch = jest.fn();
 
     const editField = async (placeholder: string, value: string) => {
@@ -97,9 +140,7 @@ describe('Tenant Detail Page tests', () => {
         jest.clearAllMocks();
         jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
         jest.spyOn(reactRouter, 'useNavigate').mockReturnValue(navigate);
-        jest.spyOn(tenantService, 'getAllTenants').mockResolvedValue([mockTenant]);
-        jest.spyOn(tenantService, 'createTenant').mockResolvedValue(mockTenant);
-        render(<TenantCreationPage />);
+        render(<RouterProvider router={router} />);
     });
 
     test('Tenant creation page is rendered', async () => {
@@ -110,7 +151,7 @@ describe('Tenant Detail Page tests', () => {
         });
 
         // The page should be fetching the tenant data to validate the short name
-        expect(tenantService.getAllTenants).toHaveBeenCalledTimes(1);
+        expect(useRouteLoaderData).toHaveBeenCalledWith('tenant-admin');
 
         // Check that the form isn't pre-filled
         await waitFor(() => {
@@ -181,22 +222,52 @@ describe('Tenant Detail Page tests', () => {
     test('Cancel button navigates back to tenant listing page', async () => {
         await waitFor(() => {
             fireEvent.click(screen.getByText('Cancel'));
-            expect(navigate).toHaveBeenCalledTimes(1);
-            expect(navigate).toHaveBeenCalledWith(`../tenantadmin`);
+            expect(
+                shouldBlockNavigation({
+                    nextLocation: { pathname: '/tenantadmin' },
+                    currentLocation: { pathname: '/tenantadmin/1/detail' },
+                }),
+                // Navigation should not be blocked since the form is untouched
+            ).toBe(false);
+            expect(navigate).toHaveBeenNthCalledWith(1, '/tenantadmin');
         });
     });
 
     test('User is prompted for confirmation when navigating with unsaved changes', async () => {
+        editField('Name', 'New Name');
+        fireEvent.click(screen.getByText('Cancel'));
         await waitFor(() => {
-            editField('Name', 'New Name');
-            fireEvent.click(screen.getByText('Cancel'));
+            expect(navigate).toHaveBeenNthCalledWith(1, '/tenantadmin');
         });
+        // navigate() is a mock fn, so we have to simulate the blocker ourselves
+        expect(
+            shouldBlockNavigation({
+                nextLocation: { pathname: '/tenantadmin' },
+                currentLocation: { pathname: '/tenantadmin/1/detail' },
+            }),
+            // Navigation should be blocked since the form is dirty and the path is different
+        ).toBe(true);
+        const blocker = {
+            state: 'blocked' as const,
+            location: {
+                pathname: '/tenantadmin',
+                state: { from: '/tenantadmin/1/detail' },
+                search: '',
+                hash: '',
+                key: 'foo',
+            },
+            proceed: blockerProceed,
+            reset: blockerReset,
+        };
+        jest.spyOn(reactRouterDom, 'useBlocker').mockReturnValue(blocker);
+        render(<RouterProvider router={router} />);
         await waitFor(() => {
             expect(capturedNotification).toBeDefined();
             expect(capturedNotification.data.header).toBe('Unsaved Changes');
             expect(capturedNotification.data.handleConfirm).toBeDefined();
         });
         capturedNotification.data.handleConfirm();
+        expect(blockerProceed).toHaveBeenCalledTimes(1);
         expect(navigate).toHaveBeenCalledTimes(1);
     });
 
diff --git a/met-web/tests/unit/components/tenantManagement/EditTenant.test.tsx b/met-web/tests/unit/components/tenantManagement/EditTenant.test.tsx
index 148e6fee3..bff5f6903 100644
--- a/met-web/tests/unit/components/tenantManagement/EditTenant.test.tsx
+++ b/met-web/tests/unit/components/tenantManagement/EditTenant.test.tsx
@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SuspenseProps } from 'react';
 import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import * as reactRedux from 'react-redux';
 import * as reactRouter from 'react-router';
 import * as tenantService from 'services/tenantService';
 import TenantEditPage from 'components/tenantManagement/Edit';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { RouterProvider, createMemoryRouter, useRouteLoaderData } from 'react-router-dom';
 import { USER_ROLES } from 'services/userService/constants';
 
 const mockTenant = {
@@ -21,6 +21,21 @@ const mockTenant = {
     logo_description: 'Logo Description One',
 };
 
+global['Request'] = jest.fn().mockImplementation(() => ({
+    signal: {
+        removeEventListener: () => {},
+        addEventListener: () => {},
+    },
+}));
+
+jest.mock('react', () => ({
+    //this makes the suspense component render its children immediately
+    ...jest.requireActual('react'),
+    Suspense: jest.fn(({ children, fallback }: { children: ReactNode; fallback: ReactNode }) => {
+        return children;
+    }),
+}));
+
 jest.mock('axios');
 
 jest.mock('@mui/material', () => ({
@@ -53,6 +68,7 @@ jest.mock('react-redux', () => ({
 }));
 
 const navigate = jest.fn();
+const revalidate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
@@ -60,11 +76,16 @@ jest.mock('react-router-dom', () => ({
         return { tenantShortName: mockTenant.short_name };
     }),
     useNavigate: jest.fn(() => navigate),
+    useRouteLoaderData: jest.fn(() => ({
+        tenant: mockTenant,
+        tenants: [mockTenant],
+    })),
+    useRevalidator: jest.fn(() => ({
+        revalidate,
+    })),
 }));
 
 jest.mock('services/tenantService', () => ({
-    getTenant: jest.fn(),
-    getAllTenants: jest.fn(),
     updateTenant: jest.fn(),
 }));
 
@@ -76,12 +97,23 @@ jest.mock('services/notificationModalService/notificationModalSlice', () => ({
     openNotificationModal: jest.fn(),
 }));
 
-// Mocking BreadcrumbTrail component
+// Mocking AutoBreadcrumbs component
 jest.mock('components/common/Navigation/Breadcrumb', () => ({
-    BreadcrumbTrail: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    AutoBreadcrumbs: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }));
 
-describe('Tenant Detail Page tests', () => {
+const router = createMemoryRouter(
+    [
+        {
+            path: '/tenantadmin/:tenantId/edit',
+            element: <TenantEditPage />,
+            id: 'tenant',
+        },
+    ],
+    { initialEntries: ['/tenantadmin/1/edit'] },
+);
+
+describe('Tenant Editing Page tests', () => {
     const dispatch = jest.fn();
 
     const editField = (placeholder: string, value: string) => {
@@ -96,25 +128,7 @@ describe('Tenant Detail Page tests', () => {
         jest.clearAllMocks();
         jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
         jest.spyOn(reactRouter, 'useNavigate').mockReturnValue(navigate);
-        jest.spyOn(tenantService, 'getAllTenants').mockResolvedValue([mockTenant]);
-        jest.spyOn(tenantService, 'getTenant').mockResolvedValue(mockTenant);
-        render(
-            <MemoryRouter initialEntries={['/tenantadmin/tenantone/edit']}>
-                <Routes>
-                    <Route path="/tenantadmin/:tenantShortName/edit" element={<TenantEditPage />} />
-                </Routes>
-            </MemoryRouter>,
-        );
-    });
-
-    test('Loader is displayed while fetching tenant data', async () => {
-        // Ensure the fetch does not resolve (force the loader to display)
-        jest.spyOn(tenantService, 'getTenant').mockReturnValue(new Promise(() => {}));
-
-        await waitFor(() => {
-            expect(screen.getByTestId('loader')).toBeVisible();
-            expect(tenantService.getTenant).toHaveBeenCalledTimes(1);
-        });
+        render(<RouterProvider router={router} />);
     });
 
     test('Tenant edit page is rendered', async () => {
@@ -125,7 +139,7 @@ describe('Tenant Detail Page tests', () => {
         });
 
         // The data should already be fetched if the header is displayed
-        expect(tenantService.getTenant).toHaveBeenCalledTimes(1);
+        expect(useRouteLoaderData).toHaveBeenCalledWith('tenant');
 
         // Check that the form is populated with the correct data
         await waitFor(() => {
@@ -172,31 +186,45 @@ describe('Tenant Detail Page tests', () => {
     });
 
     test('Character limit is enforced on fields', async () => {
+        editField('Title', 'a'.repeat(256));
         await waitFor(() => {
-            editField('Title', 'a'.repeat(256));
             expect(screen.getByText('This input is too long!')).toBeVisible();
             expect(screen.getByText('Update')).toBeDisabled();
         });
     });
 
     test('Cancel button navigates back to tenant details page', async () => {
+        fireEvent.click(screen.getByText('Cancel'));
         await waitFor(() => {
-            fireEvent.click(screen.getByText('Cancel'));
             expect(navigate).toHaveBeenCalledTimes(1);
-            expect(navigate).toHaveBeenCalledWith(`../tenantadmin/${mockTenant.short_name}/detail`);
+            expect(navigate).toHaveBeenCalledWith(`/tenantadmin/${mockTenant.short_name}/detail`);
         });
     });
 
     test('Update button calls updateTenant action', async () => {
         await waitFor(() => {
             editField('Name', 'New Name');
-            fireEvent.click(screen.getByText('Update'));
+            expect(screen.getByText('Update')).not.toBeDisabled();
+        });
+        fireEvent.click(screen.getByText('Update'));
+        await waitFor(() => {
             expect(tenantService.updateTenant).toHaveBeenCalledTimes(1);
-            const updatedTenant = {
-                ...mockTenant,
-                name: 'New Name',
-            };
-            expect(tenantService.updateTenant).toHaveBeenCalledWith(updatedTenant, mockTenant.short_name);
+        });
+        const updatedTenant = {
+            ...mockTenant,
+            name: 'New Name',
+        };
+        expect(tenantService.updateTenant).toHaveBeenCalledWith(updatedTenant, mockTenant.short_name);
+    });
+
+    test('Loader is displayed while fetching tenant data', async () => {
+        jest.spyOn(React, 'Suspense').mockImplementation((props: SuspenseProps) => {
+            return props.fallback as JSX.Element;
+        });
+        render(<RouterProvider router={router} />);
+        await waitFor(() => {
+            expect(screen.getByTestId('loader')).toBeVisible();
+            expect(useRouteLoaderData).toHaveBeenCalledWith('tenant');
         });
     });
 });
diff --git a/met-web/tests/unit/components/tenantManagement/TenantDetail.test.tsx b/met-web/tests/unit/components/tenantManagement/TenantDetail.test.tsx
index 715dce718..12a74d6c4 100644
--- a/met-web/tests/unit/components/tenantManagement/TenantDetail.test.tsx
+++ b/met-web/tests/unit/components/tenantManagement/TenantDetail.test.tsx
@@ -1,14 +1,21 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SuspenseProps } from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import * as reactRedux from 'react-redux';
 import * as reactRouter from 'react-router';
 import * as tenantService from 'services/tenantService';
 import TenantDetail from '../../../../src/components/tenantManagement/Detail';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { USER_ROLES } from 'services/userService/constants';
 import { openNotificationModal } from 'services/notificationModalService/notificationModalSlice';
 
+global['Request'] = jest.fn().mockImplementation(() => ({
+    signal: {
+        removeEventListener: () => {},
+        addEventListener: () => {},
+    },
+}));
+
 const mockTenant = {
     id: 1,
     name: 'Tenant One',
@@ -24,6 +31,14 @@ const mockTenant = {
 
 jest.mock('axios');
 
+jest.mock('react', () => ({
+    //this makes the suspense component render its children immediately
+    ...jest.requireActual('react'),
+    Suspense: jest.fn(({ children, fallback }: { children: ReactNode; fallback: ReactNode }) => {
+        return children;
+    }),
+}));
+
 jest.mock('@mui/material', () => ({
     ...jest.requireActual('@mui/material'),
     Box: ({ children }: { children: ReactNode }) => <div>{children}</div>,
@@ -59,10 +74,12 @@ jest.mock('react-router-dom', () => ({
         return { tenantId: mockTenant.short_name };
     }),
     useNavigate: jest.fn(),
+    useRouteLoaderData: jest.fn(() => ({
+        tenant: mockTenant,
+    })),
 }));
 
 jest.mock('services/tenantService', () => ({
-    getTenant: jest.fn(),
     deleteTenant: jest.fn(),
 }));
 
@@ -77,11 +94,22 @@ jest.mock('services/notificationModalService/notificationModalSlice', () => ({
     }),
 }));
 
-// Mocking BreadcrumbTrail component
+// Mocking AutoBreadcrumbs component
 jest.mock('components/common/Navigation/Breadcrumb', () => ({
-    BreadcrumbTrail: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    AutoBreadcrumbs: () => <div>Breadcrumbs</div>,
 }));
 
+const router = createMemoryRouter(
+    [
+        {
+            path: '/tenantadmin/:tenantId/detail',
+            element: <TenantDetail />,
+            id: 'tenant',
+        },
+    ],
+    { initialEntries: ['/tenantadmin/1/detail'] },
+);
+
 describe('Tenant Detail Page tests', () => {
     const dispatch = jest.fn();
     const navigate = jest.fn();
@@ -90,18 +118,10 @@ describe('Tenant Detail Page tests', () => {
         jest.clearAllMocks();
         jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
         jest.spyOn(reactRouter, 'useNavigate').mockReturnValue(navigate);
-        jest.spyOn(tenantService, 'getTenant').mockResolvedValue(mockTenant);
     });
 
     test('Tenant detail is rendered', async () => {
-        render(
-            <MemoryRouter initialEntries={['/tenantadmin/1/detail']}>
-                <Routes>
-                    <Route path="/tenantadmin/:tenantId/detail" element={<TenantDetail />} />
-                </Routes>
-            </MemoryRouter>,
-        );
-
+        render(<RouterProvider router={router} />);
         await waitFor(() => {
             const tenantNames = screen.getAllByText('Tenant One');
             expect(tenantNames).toHaveLength(2);
@@ -117,30 +137,8 @@ describe('Tenant Detail Page tests', () => {
         });
     });
 
-    test('Loading state is rendered initially', () => {
-        jest.spyOn(tenantService, 'getTenant').mockReturnValue(new Promise(() => {})); // Mock unresolved promise
-
-        render(
-            <MemoryRouter initialEntries={['/tenantadmin/1/detail']}>
-                <Routes>
-                    <Route path="/tenantadmin/:tenantId/detail" element={<TenantDetail />} />
-                </Routes>
-            </MemoryRouter>,
-        );
-
-        const loadingTexts = screen.getAllByText('Loading...');
-        expect(loadingTexts.length).toBeGreaterThan(0);
-    });
-
     test('Delete popup works as expected', async () => {
-        render(
-            <MemoryRouter initialEntries={['/tenantadmin/1/detail']}>
-                <Routes>
-                    <Route path="/tenantadmin/:tenantId/detail" element={<TenantDetail />} />
-                </Routes>
-            </MemoryRouter>,
-        );
-
+        render(<RouterProvider router={router} />);
         await waitFor(() => {
             screen.getByText('Delete Tenant Instance').click();
         });
@@ -152,4 +150,14 @@ describe('Tenant Detail Page tests', () => {
             expect(tenantService.deleteTenant).toHaveBeenCalledTimes(1);
         });
     });
+
+    test('Loading state is rendered', () => {
+        // Re-mock the Suspense component to render the fallback prop
+        jest.spyOn(React, 'Suspense').mockImplementation((props: SuspenseProps) => {
+            return props.fallback as JSX.Element;
+        });
+        render(<RouterProvider router={router} />);
+        const loadingTexts = screen.getAllByText('Loading...');
+        expect(loadingTexts.length).toBeGreaterThan(0);
+    });
 });
diff --git a/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx b/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx
index 4f35d4a2b..add37610f 100644
--- a/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx
+++ b/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx
@@ -7,7 +7,7 @@ import * as reactRouter from 'react-router';
 import * as tenantService from 'services/tenantService';
 import TenantListingPage from '../../../../src/components/tenantManagement/Listing';
 import { USER_ROLES } from 'services/userService/constants';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, RouterProvider, createMemoryRouter } from 'react-router-dom';
 
 const mockTenantOne = {
     id: 1,
@@ -58,6 +58,9 @@ jest.mock('react-router-dom', () => ({
     useLocation: jest.fn(() => ({
         search: '',
     })),
+    useRouteLoaderData: jest.fn(() => ({
+        tenants: [mockTenantOne, mockTenantTwo],
+    })),
 }));
 
 describe('Tenant Listing Page tests', () => {
@@ -71,11 +74,17 @@ describe('Tenant Listing Page tests', () => {
     });
 
     test('Tenant table is rendered', async () => {
-        render(
-            <MemoryRouter>
-                <TenantListingPage />
-            </MemoryRouter>,
+        const router = createMemoryRouter(
+            [
+                {
+                    path: '/tenantadmin/:tenantId/detail',
+                    element: <TenantListingPage />,
+                    id: 'tenant',
+                },
+            ],
+            { initialEntries: ['/tenantadmin/1/detail'] },
         );
+        render(<RouterProvider router={router} />);
 
         await waitFor(() => {
             expect(screen.getByText('Tenant One')).toBeVisible();

From 876a03168578e55811efc29c88a541acb3b4131d Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 14:49:02 -0700
Subject: [PATCH 08/11] Remove unused imports

---
 .../src/components/common/Layout/index.tsx    | 19 ++++++++-----------
 .../tenantManagement/CreateTenant.test.tsx    |  1 -
 .../tenantManagement/TenantListing.test.tsx   |  2 +-
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
index 97edd97da..f190db45a 100644
--- a/met-web/src/components/common/Layout/index.tsx
+++ b/met-web/src/components/common/Layout/index.tsx
@@ -7,24 +7,21 @@ const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('
 // A container that decreases its padding on smaller screens
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     const theme = useTheme();
-    const isDesktopOrLarger = useDesktopOrLarger(theme);
-    const isTabletOrLarger = useTabletOrLarger(theme);
 
-    let horizontalPadding;
-    if (isDesktopOrLarger) {
-        horizontalPadding = '4.0em';
-    } else {
-        if (isTabletOrLarger) {
-            horizontalPadding = '2.0em';
+    const horizontalPadding = () => {
+        if (useDesktopOrLarger(theme)) {
+            return '2em';
+        } else if (useTabletOrLarger(theme)) {
+            return '1.5em';
         } else {
-            horizontalPadding = '1.0em';
+            return '1em';
         }
-    }
+    };
 
     return (
         <Box
             sx={{
-                padding: `1.5em ${horizontalPadding}`,
+                padding: `1.5em ${horizontalPadding()}`,
             }}
             {...props}
         >
diff --git a/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx b/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx
index f325722a8..23a3a285f 100644
--- a/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx
+++ b/met-web/tests/unit/components/tenantManagement/CreateTenant.test.tsx
@@ -8,7 +8,6 @@ import * as reactRouterDom from 'react-router-dom';
 import TenantCreationPage from 'components/tenantManagement/Create';
 import { USER_ROLES } from 'services/userService/constants';
 import { RouterProvider, createMemoryRouter, useRouteLoaderData } from 'react-router-dom';
-import { act } from 'react-dom/test-utils';
 
 const mockTenant = {
     id: 1,
diff --git a/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx b/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx
index add37610f..6c2d457dc 100644
--- a/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx
+++ b/met-web/tests/unit/components/tenantManagement/TenantListing.test.tsx
@@ -7,7 +7,7 @@ import * as reactRouter from 'react-router';
 import * as tenantService from 'services/tenantService';
 import TenantListingPage from '../../../../src/components/tenantManagement/Listing';
 import { USER_ROLES } from 'services/userService/constants';
-import { MemoryRouter, RouterProvider, createMemoryRouter } from 'react-router-dom';
+import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 
 const mockTenantOne = {
     id: 1,

From 777b7edbead9e63190b2a7255bb1d3f69452cd94 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 14:52:11 -0700
Subject: [PATCH 09/11] Update changelog again

---
 CHANGELOG.MD | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index cc6fec952..909c64922 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -4,6 +4,10 @@
   - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
   - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component
   - Added the AutoBreadcrumbs component to the common components library, which will be used to generate breadcrumbs based on the current route
+  - Updated the Tenant Admin pages as a proof of concept
+    - Tenant Admin pages now use the AutoBreadcrumbs component to generate breadcrumbs based on the current route
+    - Tenant Admin pages use data loaders to fetch data from the API instead of relying on a state or context
+    - Tenant Admin pages use useBlocker() to prompt for confirmation from users navigating away from the page when they're in the middle of editing a form
 
 ## June 3, 2024
 

From 1d53ef6ee5fac6d062669ce79cef7c016906b0d2 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 14:53:20 -0700
Subject: [PATCH 10/11] Sonarcloud is weirdly insistent about naming

---
 met-web/src/components/common/Layout/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
index f190db45a..2ae649a93 100644
--- a/met-web/src/components/common/Layout/index.tsx
+++ b/met-web/src/components/common/Layout/index.tsx
@@ -8,7 +8,7 @@ const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     const theme = useTheme();
 
-    const horizontalPadding = () => {
+    const useHorizontalPadding = () => {
         if (useDesktopOrLarger(theme)) {
             return '2em';
         } else if (useTabletOrLarger(theme)) {
@@ -21,7 +21,7 @@ export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     return (
         <Box
             sx={{
-                padding: `1.5em ${horizontalPadding()}`,
+                padding: `1.5em ${useHorizontalPadding()}`,
             }}
             {...props}
         >

From 12ab9cf888129ba5da62cbdfed43d5eed5ac662a Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Thu, 6 Jun 2024 14:55:11 -0700
Subject: [PATCH 11/11] sonarcloud *please*

---
 met-web/src/components/common/Layout/index.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
index 2ae649a93..e261ac41b 100644
--- a/met-web/src/components/common/Layout/index.tsx
+++ b/met-web/src/components/common/Layout/index.tsx
@@ -7,11 +7,13 @@ const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('
 // A container that decreases its padding on smaller screens
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     const theme = useTheme();
+    const isDesktopOrLarger = useDesktopOrLarger(theme);
+    const isTabletOrLarger = useTabletOrLarger(theme);
 
-    const useHorizontalPadding = () => {
-        if (useDesktopOrLarger(theme)) {
+    const horizontalPadding = () => {
+        if (isDesktopOrLarger) {
             return '2em';
-        } else if (useTabletOrLarger(theme)) {
+        } else if (isTabletOrLarger) {
             return '1.5em';
         } else {
             return '1em';
@@ -21,7 +23,7 @@ export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     return (
         <Box
             sx={{
-                padding: `1.5em ${useHorizontalPadding()}`,
+                padding: `1.5em ${horizontalPadding}`,
             }}
             {...props}
         >