From 6d73b950e3e614867926321aaa2a5accaa1b0859 Mon Sep 17 00:00:00 2001
From: ewsgit <ewsgit@ewsgit.uk>
Date: Tue, 24 Mar 2026 10:12:24 +0000
Subject: [PATCH] implement route lazy loading for applications to minimise
 network transfer

---
 applications/uk.tcsw.dashboard/web/App.tsx    |  11 +-
 applications/uk.tcsw.files/web/App.tsx        |   9 +-
 applications/uk.tcsw.photos/web/App.tsx       |  55 +++--
 applications/uk.tcsw.settings/web/App.tsx     |  85 +++-----
 applications/uk.tcsw.settings/web/Layout.tsx  | 193 +++++++++---------
 .../MethodPassword/MethodPassword.tsx         |  15 +-
 applications/uk.tcsw.store/web/App.tsx        |  21 +-
 7 files changed, 181 insertions(+), 208 deletions(-)

diff --git a/applications/uk.tcsw.dashboard/web/App.tsx b/applications/uk.tcsw.dashboard/web/App.tsx
index b416ea8..de480d0 100644
--- a/applications/uk.tcsw.dashboard/web/App.tsx
+++ b/applications/uk.tcsw.dashboard/web/App.tsx
@@ -1,13 +1,10 @@
-import { type Component } from "solid-js";
-import RootPage from "./pages/root";
 import { Route } from "@solidjs/router";
+import { type Component, lazy } from "solid-js";
+
+const RootPage = lazy(() => import("./pages/root"));
 
 const App: Component = () => {
-  return (
-    <>
-      <Route path={"/"} component={RootPage} />
-    </>
-  );
+  return <Route path={"/"} component={RootPage} />;
 };
 
 export default App;
diff --git a/applications/uk.tcsw.files/web/App.tsx b/applications/uk.tcsw.files/web/App.tsx
index dc9b74c..87140ae 100644
--- a/applications/uk.tcsw.files/web/App.tsx
+++ b/applications/uk.tcsw.files/web/App.tsx
@@ -1,8 +1,9 @@
 import { Route } from "@solidjs/router";
-import type { Component } from "solid-js";
-import Redirect from "./components/Redirect.tsx";
-import ViewContainer from "./components/ViewContainer/ViewContainer.tsx";
-import Layout from "./Layout.tsx";
+import { type Component, lazy } from "solid-js";
+
+const Redirect = lazy(() => import("./components/Redirect.tsx"));
+const ViewContainer = lazy(() => import("./components/ViewContainer/ViewContainer.tsx"));
+const Layout = lazy(() => import("./Layout.tsx"));
 
 const App: Component = () => {
   return (
diff --git a/applications/uk.tcsw.photos/web/App.tsx b/applications/uk.tcsw.photos/web/App.tsx
index 9c963fd..ef5eedd 100644
--- a/applications/uk.tcsw.photos/web/App.tsx
+++ b/applications/uk.tcsw.photos/web/App.tsx
@@ -1,37 +1,36 @@
-import { type Component } from "solid-js";
 import { Route } from "@solidjs/router";
-import PhotosLayout from "./Layout";
-import GalleryPage from "./pages/gallery/Index";
-import SearchPage from "./pages/search/Index";
-import MoreSettingsPage from "./pages/moreSettings/Index";
-import SearchLayout from "./pages/search/Layout";
-import SearchPeoplePage from "./pages/search/people/Index";
-import SearchAlbumsPage from "./pages/search/albums/Index";
-import SearchPlacesPage from "./pages/search/places/Index";
+import { type Component, lazy } from "solid-js";
+
+const PhotosLayout = lazy(() => import("./Layout"));
+const GalleryPage = lazy(() => import("./pages/gallery/Index"));
+const MoreSettingsPage = lazy(() => import("./pages/moreSettings/Index"));
+const SearchAlbumsPage = lazy(() => import("./pages/search/albums/Index"));
+const SearchPage = lazy(() => import("./pages/search/Index"));
+const SearchLayout = lazy(() => import("./pages/search/Layout"));
+const SearchPeoplePage = lazy(() => import("./pages/search/people/Index"));
+const SearchPlacesPage = lazy(() => import("./pages/search/places/Index"));
 
 const App: Component = () => {
   return (
-    <>
-      <Route component={PhotosLayout}>
-        <Route path="/" component={GalleryPage} />
-        <Route path="/search" component={SearchLayout}>
-          <Route path="/" component={SearchPage} />
-          <Route path="/people">
-            <Route path="/" component={() => <>No Query!</>} />
-            <Route path="/:query" component={SearchPeoplePage} />
-          </Route>
-          <Route path="/albums">
-            <Route path="/" component={() => <>No Query!</>} />
-            <Route path="/:query" component={SearchAlbumsPage} />
-          </Route>
-          <Route path="/places">
-            <Route path="/" component={() => <>No Query!</>} />
-            <Route path="/:query" component={SearchPlacesPage} />
-          </Route>
+    <Route component={PhotosLayout}>
+      <Route path="/" component={GalleryPage} />
+      <Route path="/search" component={SearchLayout}>
+        <Route path="/" component={SearchPage} />
+        <Route path="/people">
+          <Route path="/" component={() => <>No Query!</>} />
+          <Route path="/:query" component={SearchPeoplePage} />
+        </Route>
+        <Route path="/albums">
+          <Route path="/" component={() => <>No Query!</>} />
+          <Route path="/:query" component={SearchAlbumsPage} />
+        </Route>
+        <Route path="/places">
+          <Route path="/" component={() => <>No Query!</>} />
+          <Route path="/:query" component={SearchPlacesPage} />
         </Route>
-        <Route path="/more" component={MoreSettingsPage} />
       </Route>
-    </>
+      <Route path="/more" component={MoreSettingsPage} />
+    </Route>
   );
 };
 
diff --git a/applications/uk.tcsw.settings/web/App.tsx b/applications/uk.tcsw.settings/web/App.tsx
index 08dd6f6..02398bd 100644
--- a/applications/uk.tcsw.settings/web/App.tsx
+++ b/applications/uk.tcsw.settings/web/App.tsx
@@ -1,59 +1,42 @@
 import { Route } from "@solidjs/router";
-import { type Component, createEffect, createSignal, ErrorBoundary } from "solid-js";
-import { AppContext } from "./appContext.ts";
-import Layout from "./Layout";
-import trpc from "./lib/trpc.ts";
-import ApplicationPage from "./pages/applications/applicationId/Index.tsx";
-import ApplicationsPage from "./pages/applications/Index.tsx";
-import AuthenticationPage from "./pages/authentication/Index";
-import ColorThemePage from "./pages/customization/colorTheme/Index.tsx";
-import CustomizationPage from "./pages/customization/Index";
-import QuickShortcutsPage from "./pages/customization/quickShortcuts/Index.tsx";
-import WallpaperPage from "./pages/customization/wallpaper/Index.tsx";
-import InstancePage from "./pages/instance/Index";
-import ProfilePage from "./pages/profile/Index";
-import RootPage from "./pages/root";
-import StoragePage from "./pages/storage/Index";
+import { type Component, ErrorBoundary, lazy } from "solid-js";
 
-const App: Component = () => {
-  const [isAdministrator, setIsAdministrator] = createSignal<boolean>(false);
-  const [shootYourselfInTheFoot, setShootYourselfInTheFoot] = createSignal<boolean>(false);
-
-  createEffect(async () => {
-    setIsAdministrator(await trpc.instance.isUserAdministrator.query());
-    setShootYourselfInTheFoot(await trpc.instance.hasFeature.query("shoot_yourself_in_the_foot"));
-  });
+const Layout = lazy(() => import("./Layout"));
+const ApplicationPage = lazy(() => import("./pages/applications/applicationId/Index.tsx"));
+const ApplicationsPage = lazy(() => import("./pages/applications/Index.tsx"));
+const AuthenticationPage = lazy(() => import("./pages/authentication/Index"));
+const ColorThemePage = lazy(() => import("./pages/customization/colorTheme/Index.tsx"));
+const CustomizationPage = lazy(() => import("./pages/customization/Index"));
+const QuickShortcutsPage = lazy(() => import("./pages/customization/quickShortcuts/Index.tsx"));
+const WallpaperPage = lazy(() => import("./pages/customization/wallpaper/Index.tsx"));
+const InstancePage = lazy(() => import("./pages/instance/Index"));
+const ProfilePage = lazy(() => import("./pages/profile/Index"));
+const RootPage = lazy(() => import("./pages/root"));
+const StoragePage = lazy(() => import("./pages/storage/Index"));
 
+const App: Component = () => {
   return (
-    <AppContext.Provider
-      value={{
-        isAdministrator: isAdministrator,
-        shootYourselfInTheFoot: shootYourselfInTheFoot,
-        setShootYourselfInTheFoot: setShootYourselfInTheFoot,
-      }}
-    >
-      <Route component={Layout}>
-        <Route path={"/"} component={RootPage} />
-        <Route path={"/profile"} component={ProfilePage} />
-        <Route path={"/authentication"}>
-          <Route path={"/"} component={AuthenticationPage} />
-        </Route>
-        <Route path={"/storage"} component={StoragePage} />
-        <Route path={"/customization"}>
-          <Route path={"/"} component={CustomizationPage} />
-          <Route path={"/wallpaper"} component={WallpaperPage} />
-          <Route path={"/color-theme"} component={ColorThemePage} />
-          <Route path={"/quick-shortcuts"} component={QuickShortcutsPage} />
-        </Route>
-        <Route path={"/instance"} component={InstancePage} />
-        <Route path={"/applications"}>
-          <Route path={"/"} component={ApplicationsPage} />
-          <ErrorBoundary fallback={() => <div>Failed</div>}>
-            <Route path={":applicationId"} component={ApplicationPage} />
-          </ErrorBoundary>
-        </Route>
+    <Route component={Layout}>
+      <Route path={"/"} component={RootPage} />
+      <Route path={"/profile"} component={ProfilePage} />
+      <Route path={"/authentication"}>
+        <Route path={"/"} component={AuthenticationPage} />
+      </Route>
+      <Route path={"/storage"} component={StoragePage} />
+      <Route path={"/customization"}>
+        <Route path={"/"} component={CustomizationPage} />
+        <Route path={"/wallpaper"} component={WallpaperPage} />
+        <Route path={"/color-theme"} component={ColorThemePage} />
+        <Route path={"/quick-shortcuts"} component={QuickShortcutsPage} />
+      </Route>
+      <Route path={"/instance"} component={InstancePage} />
+      <Route path={"/applications"}>
+        <Route path={"/"} component={ApplicationsPage} />
+        <ErrorBoundary fallback={() => <div>Failed</div>}>
+          <Route path={":applicationId"} component={ApplicationPage} />
+        </ErrorBoundary>
       </Route>
-    </AppContext.Provider>
+    </Route>
   );
 };
 
diff --git a/applications/uk.tcsw.settings/web/Layout.tsx b/applications/uk.tcsw.settings/web/Layout.tsx
index 3c2ff46..422821f 100644
--- a/applications/uk.tcsw.settings/web/Layout.tsx
+++ b/applications/uk.tcsw.settings/web/Layout.tsx
@@ -1,115 +1,116 @@
+import APPS_ICON from "@material-symbols/svg-700/outlined/apps.svg";
+import HOME_ICON from "@material-symbols/svg-700/outlined/home.svg";
+import PASSKEY_ICON from "@material-symbols/svg-700/outlined/passkey.svg";
+import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg";
+import SETTINGS_APPLICATIONS_ICON from "@material-symbols/svg-700/outlined/settings_applications.svg";
+import STORAGE_ICON from "@material-symbols/svg-700/outlined/storage.svg";
+import WALLPAPER_ICON from "@material-symbols/svg-700/outlined/wallpaper.svg";
 import { useLocation, useNavigate } from "@solidjs/router";
 import UKIndeterminateSpinner from "@tcsw/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
-import {
-  createResource,
-  Suspense,
-  type Component,
-  type ParentProps,
-} from "solid-js";
+import UKSideBar from "@tcsw/uikit-solid/src/components/sideBar/UKSideBar.tsx";
+import { type Component, createEffect, createSignal, type ParentProps, Suspense } from "solid-js";
+import { AppContext } from "./appContext";
 import styles from "./Layout.module.scss";
 import trpc from "./lib/trpc";
-import UKSideBar from "@tcsw/uikit-solid/src/components/sideBar/UKSideBar.tsx";
-import SETTINGS_APPLICATIONS_ICON from "@material-symbols/svg-700/outlined/settings_applications.svg"
-import APPS_ICON from "@material-symbols/svg-700/outlined/apps.svg"
-import HOME_ICON from "@material-symbols/svg-700/outlined/home.svg"
-import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg"
-import PASSKEY_ICON from "@material-symbols/svg-700/outlined/passkey.svg"
-import STORAGE_ICON from "@material-symbols/svg-700/outlined/storage.svg"
-import WALLPAPER_ICON from "@material-symbols/svg-700/outlined/wallpaper.svg"
 
 const Layout: Component<ParentProps> = (props) => {
-  const [isAdministrator] = createResource(() =>
-    trpc.instance.isUserAdministrator.query(),
-  );
+  const [isAdministrator, setIsAdministrator] = createSignal<boolean>(false);
+  const [shootYourselfInTheFoot, setShootYourselfInTheFoot] = createSignal<boolean>(false);
+
+  createEffect(async () => {
+    setIsAdministrator(await trpc.instance.isUserAdministrator.query());
+    setShootYourselfInTheFoot(await trpc.instance.hasFeature.query("shoot_yourself_in_the_foot"));
+  });
+
   const location = useLocation();
   const navigate = useNavigate();
 
   return (
-    <UKSideBar
-      items={[
-        {
-          type: "label",
-          label: "Settings",
-        },
-        {
-          type: "button",
-          icon: { type: "icon", value: HOME_ICON },
-          label: "Overview",
-          onClick() {
-            navigate("/app/uk.tcsw.settings");
+    <AppContext.Provider
+      value={{
+        isAdministrator: isAdministrator,
+        shootYourselfInTheFoot: shootYourselfInTheFoot,
+        setShootYourselfInTheFoot: setShootYourselfInTheFoot,
+      }}
+    >
+      <UKSideBar
+        items={[
+          {
+            type: "label",
+            label: "Settings",
           },
-          active: location.pathname === "/app/uk.tcsw.settings",
-        },
-        {
-          type: "button",
-          icon: { type: "icon", value: PERSON_ICON },
-          label: "Profile",
-          onClick() {
-            navigate("/app/uk.tcsw.settings/profile");
+          {
+            type: "button",
+            icon: { type: "icon", value: HOME_ICON },
+            label: "Overview",
+            onClick() {
+              navigate("/app/uk.tcsw.settings");
+            },
+            active: location.pathname === "/app/uk.tcsw.settings",
           },
-          active: location.pathname.startsWith("/app/uk.tcsw.settings/profile"),
-        },
-        {
-          type: "button",
-          icon: { type: "icon", value: PASSKEY_ICON },
-          label: "Authentication",
-          onClick() {
-            navigate("/app/uk.tcsw.settings/authentication");
+          {
+            type: "button",
+            icon: { type: "icon", value: PERSON_ICON },
+            label: "Profile",
+            onClick() {
+              navigate("/app/uk.tcsw.settings/profile");
+            },
+            active: location.pathname.startsWith("/app/uk.tcsw.settings/profile"),
           },
-          active: location.pathname.startsWith(
-            "/app/uk.tcsw.settings/authentication",
-          ),
-        },
-        {
-          type: "button",
-          icon: { type: "icon", value: STORAGE_ICON },
-          label: "Storage",
-          onClick() {
-            navigate("/app/uk.tcsw.settings/storage");
+          {
+            type: "button",
+            icon: { type: "icon", value: PASSKEY_ICON },
+            label: "Authentication",
+            onClick() {
+              navigate("/app/uk.tcsw.settings/authentication");
+            },
+            active: location.pathname.startsWith("/app/uk.tcsw.settings/authentication"),
           },
-          active: location.pathname.startsWith("/app/uk.tcsw.settings/storage"),
-        },
-        {
-          type: "button",
-          icon: { type: "icon", value: WALLPAPER_ICON },
-          label: "Customization",
-          onClick() {
-            navigate("/app/uk.tcsw.settings/customization");
+          {
+            type: "button",
+            icon: { type: "icon", value: STORAGE_ICON },
+            label: "Storage",
+            onClick() {
+              navigate("/app/uk.tcsw.settings/storage");
+            },
+            active: location.pathname.startsWith("/app/uk.tcsw.settings/storage"),
           },
-          active: location.pathname.startsWith(
-            "/app/uk.tcsw.settings/customization",
-          ),
-        },
-        {
-          type: "button",
-          icon: {type: "icon", value: APPS_ICON},
-          label: "Applications",
-          onClick() {
-            navigate("/app/uk.tcsw.settings/applications");
+          {
+            type: "button",
+            icon: { type: "icon", value: WALLPAPER_ICON },
+            label: "Customization",
+            onClick() {
+              navigate("/app/uk.tcsw.settings/customization");
+            },
+            active: location.pathname.startsWith("/app/uk.tcsw.settings/customization"),
           },
-          active: location.pathname.startsWith(
-            "/app/uk.tcsw.settings/applications",
-          ),
-        },
-        isAdministrator()
-          ? {
-              type: "button",
-            icon: {type: "icon", value: SETTINGS_APPLICATIONS_ICON},
-              label: "Configure Instance",
-              onClick() {
-                navigate("/app/uk.tcsw.settings/instance");
-              },
-              active: location.pathname.startsWith(
-                "/app/uk.tcsw.settings/instance",
-              ),
-            }
-          : undefined,
-      ]}
-    >
-      <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>
-        {props.children}
-      </Suspense>
-    </UKSideBar>
+          {
+            type: "button",
+            icon: { type: "icon", value: APPS_ICON },
+            label: "Applications",
+            onClick() {
+              navigate("/app/uk.tcsw.settings/applications");
+            },
+            active: location.pathname.startsWith("/app/uk.tcsw.settings/applications"),
+          },
+          isAdministrator()
+            ? {
+                type: "button",
+                icon: { type: "icon", value: SETTINGS_APPLICATIONS_ICON },
+                label: "Configure Instance",
+                onClick() {
+                  navigate("/app/uk.tcsw.settings/instance");
+                },
+                active: location.pathname.startsWith("/app/uk.tcsw.settings/instance"),
+              }
+            : undefined,
+        ]}
+      >
+        <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>
+          {props.children}
+        </Suspense>
+      </UKSideBar>
+    </AppContext.Provider>
   );
 };
 
diff --git a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/MethodPassword.tsx b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/MethodPassword.tsx
index 32f7eb3..9a7c341 100644
--- a/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/MethodPassword.tsx
+++ b/applications/uk.tcsw.settings/web/pages/authentication/components/MethodPassword/MethodPassword.tsx
@@ -1,20 +1,15 @@
+import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg";
+import PASSWORD_ICON from "@material-symbols/svg-700/outlined/password.svg";
 import { useSearchParams } from "@solidjs/router";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
 import UKDialog from "@tcsw/uikit-solid/src/components/dialog/UKDialog.tsx";
 import UKIcon from "@tcsw/uikit-solid/src/components/icon/UKIcon.jsx";
 import UKStackItem from "@tcsw/uikit-solid/src/components/stack/UKStackItem.jsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
-import {
-  type Component,
-  createResource,
-  createSignal,
-  Suspense,
-} from "solid-js";
+import { type Component, createResource, createSignal, Suspense } from "solid-js";
 import trpc from "../../../../lib/trpc";
 import ResetPasswordDialogue from "./components/ResetPasswordDialogue/ResetPasswordDialogue.tsx";
 import styles from "./MethodPassword.module.scss";
-import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg"
-import PASSWORD_ICON from "@material-symbols/svg-700/outlined/password.svg"
 
 const MethodPassword: Component = () => {
   const [hasPassword, { refetch: refetchHasPassword }] = createResource(() =>
@@ -39,9 +34,7 @@ const MethodPassword: Component = () => {
             ? "You have password authentication enabled"
             : "Setup password authentication"
         }
-        inlineComponent={
-          hasPassword() && <UKIcon class={styles.enabledIcon}>{CHECK_ICON}</UKIcon>
-        }
+        inlineComponent={hasPassword() && <UKIcon class={styles.enabledIcon}>{CHECK_ICON}</UKIcon>}
         expandedComponent={
           <div class={styles.expanded}>
             <UKText role="body" size="m">
diff --git a/applications/uk.tcsw.store/web/App.tsx b/applications/uk.tcsw.store/web/App.tsx
index 4a7d0ca..4173f66 100644
--- a/applications/uk.tcsw.store/web/App.tsx
+++ b/applications/uk.tcsw.store/web/App.tsx
@@ -1,12 +1,14 @@
-import { type Component } from "solid-js";
 import { Route } from "@solidjs/router";
-import SearchPage from "./pages/search/Index";
-import CategoriesPage from "./pages/categories/Index";
-import ManageInstalledPage from "./pages/manage-installed/Index";
-import Layout from "./Layout";
-import ApplicationPage from "./pages/app/Index";
+import { type Component, lazy } from "solid-js";
 
-const App: Component = () => {1
+const SearchPage = lazy(() => import("./pages/search/Index"));
+const CategoriesPage = lazy(() => import("./pages/categories/Index"));
+const ManageInstalledPage = lazy(() => import("./pages/manage-installed/Index"));
+const Layout = lazy(() => import("./Layout"));
+const ApplicationPage = lazy(() => import("./pages/app/Index"));
+
+const App: Component = () => {
+  1;
   return (
     <Route component={Layout}>
       {/*<Route path="/" component={RootPage} />*/}
@@ -14,10 +16,7 @@ const App: Component = () => {1
       <Route path="/search" component={SearchPage} />
       <Route path="/categories" component={CategoriesPage} />
       <Route path="/manage-installed" component={ManageInstalledPage} />
-      <Route
-        path="/app/:repository/:applicationId"
-        component={ApplicationPage}
-      />
+      <Route path="/app/:repository/:applicationId" component={ApplicationPage} />
     </Route>
   );
 };
-- 
2.51.2