feat: add lazy loading of base routes (#5293)

- add tests for `useWindowTitle` hook

src/app/App.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 
 import { Notification } from "@canonical/react-components";
 import { usePrevious } from "@canonical/react-components/dist/hooks";
@@ -197,7 +197,17 @@ export const App = (): JSX.Element => {
           </header>
         )}
 
-        {content}
+        <Suspense
+          fallback={
+            <PageContent
+              header={<SectionHeader loading />}
+              sidePanelContent={null}
+              sidePanelTitle={null}
+            />
+          }
+        >
+          {content}
+        </Suspense>
         <aside className="l-status">
           <StatusBar />
         </aside>

src/app/Routes.test.tsx

@@ -4,6 +4,7 @@ import Routes from "./Routes";
 import type { RootState } from "./store/root/types";
 
 import urls from "@/app/base/urls";
+import { LONG_TIMEOUT } from "@/testing/constants";
 import {
   rootState as rootStateFactory,
   controller as controllerFactory,
@@ -184,7 +185,10 @@ describe("Routes", () => {
         state,
         routePattern: "/*",
       });
-      await waitFor(() => expect(document.title).toBe(`${title} | MAAS`));
+      await waitFor(() => expect(document.title).toBe(`${title} | MAAS`), {
+        // Wait for pages with redirects
+        timeout: LONG_TIMEOUT,
+      });
     });
   });
 
@@ -194,7 +198,9 @@ describe("Routes", () => {
         route: path,
         state,
       });
-      expect(window.location.pathname).toBe(`${path}/summary`);
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${path}/summary`)
+      );
     });
   });
 
@@ -206,19 +212,27 @@ describe("Routes", () => {
     expect(window.location.pathname).toBe(urls.machines.index);
   });
 
-  it("redirects from Settings base URL to configuration", () => {
+  it("redirects from Settings base URL to configuration", async () => {
     renderWithBrowserRouter(<Routes />, {
       route: urls.settings.index,
       state,
     });
-    expect(window.location.pathname).toBe(urls.settings.configuration.index);
+    await waitFor(() =>
+      expect(window.location.pathname).toBe(urls.settings.configuration.index)
+    );
   });
 
-  it("redirects from Preferences base URL to Details", () => {
+  it("redirects from Preferences base URL to Details", async () => {
     renderWithBrowserRouter(<Routes />, {
       route: urls.preferences.index,
       state,
     });
-    expect(window.location.pathname).toBe(urls.preferences.details);
+    await waitFor(
+      () => expect(window.location.pathname).toBe(urls.preferences.details),
+      {
+        // Wait for pages with redirects
+        timeout: LONG_TIMEOUT,
+      }
+    );
   });
 });

src/app/Routes.tsx

@@ -1,32 +1,43 @@
+import { lazy } from "react";
+
 import { Redirect } from "react-router-dom";
 import { Route, Routes as ReactRouterRoutes } from "react-router-dom-v5-compat";
 
 import ErrorBoundary from "@/app/base/components/ErrorBoundary";
 import urls from "@/app/base/urls";
 import NotFound from "@/app/base/views/NotFound";
-import ControllerDetails from "@/app/controllers/views/ControllerDetails";
-import ControllerList from "@/app/controllers/views/ControllerList";
-import DeviceDetails from "@/app/devices/views/DeviceDetails";
-import DeviceList from "@/app/devices/views/DeviceList";
-import DomainDetails from "@/app/domains/views/DomainDetails";
-import DomainsList from "@/app/domains/views/DomainsList";
-import ImageList from "@/app/images/views/ImageList";
-import Intro from "@/app/intro/views/Intro";
-import KVM from "@/app/kvm/views/KVM";
-import MachineDetails from "@/app/machines/views/MachineDetails";
-import Machines from "@/app/machines/views/Machines";
-import NetworkDiscovery from "@/app/networkDiscovery/views/NetworkDiscovery";
-import Pools from "@/app/pools/views/Pools";
-import Preferences from "@/app/preferences/views/Preferences";
-import Settings from "@/app/settings/views/Settings";
-import FabricDetails from "@/app/subnets/views/FabricDetails";
-import SpaceDetails from "@/app/subnets/views/SpaceDetails";
-import SubnetDetails from "@/app/subnets/views/SubnetDetails";
-import SubnetsList from "@/app/subnets/views/SubnetsList";
-import VLANDetails from "@/app/subnets/views/VLANDetails";
-import Tags from "@/app/tags/views/Tags";
-import ZoneDetails from "@/app/zones/views/ZoneDetails";
-import ZonesList from "@/app/zones/views/ZonesList";
+
+const ControllerDetails = lazy(
+  () => import("@/app/controllers/views/ControllerDetails")
+);
+const ControllerList = lazy(
+  () => import("@/app/controllers/views/ControllerList")
+);
+const DeviceDetails = lazy(() => import("@/app/devices/views/DeviceDetails"));
+const DeviceList = lazy(() => import("@/app/devices/views/DeviceList"));
+const DomainDetails = lazy(() => import("@/app/domains/views/DomainDetails"));
+const DomainsList = lazy(() => import("@/app/domains/views/DomainsList"));
+const ImageList = lazy(() => import("@/app/images/views/ImageList"));
+const Intro = lazy(() => import("@/app/intro/views/Intro"));
+const KVM = lazy(() => import("@/app/kvm/views/KVM"));
+const MachineDetails = lazy(
+  () => import("@/app/machines/views/MachineDetails")
+);
+const Machines = lazy(() => import("@/app/machines/views/Machines"));
+const NetworkDiscovery = lazy(
+  () => import("@/app/networkDiscovery/views/NetworkDiscovery")
+);
+const Pools = lazy(() => import("@/app/pools/views/Pools"));
+const Preferences = lazy(() => import("@/app/preferences/views/Preferences"));
+const Settings = lazy(() => import("@/app/settings/views/Settings"));
+const FabricDetails = lazy(() => import("@/app/subnets/views/FabricDetails"));
+const SpaceDetails = lazy(() => import("@/app/subnets/views/SpaceDetails"));
+const SubnetDetails = lazy(() => import("@/app/subnets/views/SubnetDetails"));
+const SubnetsList = lazy(() => import("@/app/subnets/views/SubnetsList"));
+const VLANDetails = lazy(() => import("@/app/subnets/views/VLANDetails"));
+const Tags = lazy(() => import("@/app/tags/views/Tags"));
+const ZoneDetails = lazy(() => import("@/app/zones/views/ZoneDetails"));
+const ZonesList = lazy(() => import("@/app/zones/views/ZonesList"));
 
 const Routes = (): JSX.Element => (
   <ReactRouterRoutes>