From c7d983942f2e70bc9a67ef87d8cb102e5ea8b9df Mon Sep 17 00:00:00 2001
From: dswbx <dennis.senn@gmx.ch>
Date: Fri, 10 Jan 2025 18:04:40 +0100
Subject: [PATCH] Add loading indicator for admin asset initialization

Introduced a "loading" div to indicate when admin assets are being fetched. Updated rendering logic and styles in related components to account for this state. Prepared groundwork for potential view transitions.
---
 app/src/modules/server/AdminController.tsx | 23 ++++++++++++--
 app/src/ui/Admin.tsx                       |  2 +-
 app/src/ui/components/wouter/Link.tsx      | 26 +++++++++++-----
 app/src/ui/lib/routes.ts                   | 36 ++++++++++++++++------
 app/src/ui/main.tsx                        |  5 ++-
 5 files changed, 71 insertions(+), 21 deletions(-)
diff --git a/app/src/modules/server/AdminController.tsx b/app/src/modules/server/AdminController.tsx
index e7e60fe..be75698 100644
--- a/app/src/modules/server/AdminController.tsx
+++ b/app/src/modules/server/AdminController.tsx
@@ -140,11 +140,13 @@ export class AdminController extends Controller {
          }
       }
 
+      const theme = configs.server.admin.color_scheme ?? "light";
+
       return (
          <Fragment>
             {/* dnd complains otherwise */}
             {html`<!DOCTYPE html>`}
-            <html lang="en" class={configs.server.admin.color_scheme ?? "light"}>
+            <html lang="en" class={theme}>
                <head>
                   <meta charset="UTF-8" />
                   <meta
@@ -173,9 +175,24 @@ export class AdminController extends Controller {
                      </Fragment>
                   )}
                </head>
-               <body>
+               <body style={{ backgroundColor: theme === "light" ? "#fff" : "#000" }}>
                   <div id="root" />
-                  <div id="app" />
+                  <div id="app">
+                     <div
+                        id="loading"
+                        style={{
+                           height: "100vh",
+                           width: "100vw",
+                           display: "flex",
+                           justifyContent: "center",
+                           alignItems: "center",
+                           fontFamily: "monospace",
+                           opacity: 0.3
+                        }}
+                     >
+                        Initializing...
+                     </div>
+                  </div>
                   <script
                      dangerouslySetInnerHTML={{
                         __html: bknd_context
diff --git a/app/src/ui/Admin.tsx b/app/src/ui/Admin.tsx
index f6af592..b00802e 100644
--- a/app/src/ui/Admin.tsx
+++ b/app/src/ui/Admin.tsx
@@ -84,7 +84,7 @@ const Skeleton = ({ theme = "light" }: { theme?: string }) => {
             </header>
             <AppShell.Content>
                <div className="flex flex-col w-full h-full justify-center items-center">
-                  <span className="font-mono opacity-30">Loading</span>
+                  {/*<span className="font-mono opacity-30">Loading</span>*/}
                </div>
             </AppShell.Content>
          </AppShell.Root>
diff --git a/app/src/ui/components/wouter/Link.tsx b/app/src/ui/components/wouter/Link.tsx
index 58a8cca..faae12e 100644
--- a/app/src/ui/components/wouter/Link.tsx
+++ b/app/src/ui/components/wouter/Link.tsx
@@ -45,8 +45,9 @@ const useLocationFromRouter = (router) => {
 export function Link({
    className,
    native,
+   onClick,
    ...props
-}: { className?: string; native?: boolean } & LinkProps) {
+}: { className?: string; native?: boolean; transition?: boolean } & LinkProps) {
    const router = useRouter();
    const [path, navigate] = useLocationFromRouter(router);
 
@@ -69,17 +70,28 @@ export function Link({
    const absPath = absolutePath(path, router.base).replace("//", "/");
    const active =
       href.replace(router.base, "").length <= 1 ? href === absPath : isActive(absPath, href);
-   const a = useRoute(_href);
 
-   /*if (active) {
-      console.log("link", { a, path, absPath, href, to, active, router });
-   }*/
    if (native) {
       return <a className={`${active ? "active " : ""}${className}`} {...props} />;
    }
 
+   const wouterOnClick = (e: any) => {
+      // prepared for view transition
+      /*if (props.transition !== false) {
+         e.preventDefault();
+         onClick?.(e);
+         document.startViewTransition(() => {
+            navigate(props.href ?? props.to, props);
+         });
+      }*/
+   };
+
    return (
-      // @ts-expect-error className is not typed on WouterLink
-      <WouterLink className={`${active ? "active " : ""}${className}`} {...props} />
+      <WouterLink
+         // @ts-expect-error className is not typed on WouterLink
+         className={`${active ? "active " : ""}${className}`}
+         {...props}
+         onClick={wouterOnClick}
+      />
    );
 }
diff --git a/app/src/ui/lib/routes.ts b/app/src/ui/lib/routes.ts
index 1b3779c..5ca8fe2 100644
--- a/app/src/ui/lib/routes.ts
+++ b/app/src/ui/lib/routes.ts
@@ -64,18 +64,36 @@ export function useNavigate() {
       (
          url: string,
          options?:
-            | { query?: object; absolute?: boolean; replace?: boolean; state?: any }
+            | {
+                 query?: object;
+                 absolute?: boolean;
+                 replace?: boolean;
+                 state?: any;
+                 transition?: boolean;
+              }
             | { reload: true }
       ) => {
-         if (options && "reload" in options) {
-            window.location.href = url;
-            return;
-         }
+         const wrap = (fn: () => void) => {
+            fn();
+            // prepared for view transition
+            /*if (options && "transition" in options && options.transition === false) {
+               fn();
+            } else {
+               document.startViewTransition(fn);
+            }*/
+         };
 
-         const _url = options?.absolute ? `~/${basepath}${url}`.replace(/\/+/g, "/") : url;
-         navigate(options?.query ? withQuery(_url, options?.query) : _url, {
-            replace: options?.replace,
-            state: options?.state
+         wrap(() => {
+            if (options && "reload" in options) {
+               window.location.href = url;
+               return;
+            }
+
+            const _url = options?.absolute ? `~/${basepath}${url}`.replace(/\/+/g, "/") : url;
+            navigate(options?.query ? withQuery(_url, options?.query) : _url, {
+               replace: options?.replace,
+               state: options?.state
+            });
          });
       },
       location
diff --git a/app/src/ui/main.tsx b/app/src/ui/main.tsx
index b57a399..37d32de 100644
--- a/app/src/ui/main.tsx
+++ b/app/src/ui/main.tsx
@@ -10,7 +10,10 @@ function ClientApp() {
 
 // Render the app
 const rootElement = document.getElementById("app")!;
-if (!rootElement.innerHTML) {
+const shouldRender =
+   !rootElement.innerHTML ||
+   (rootElement.childElementCount === 1 && rootElement.firstElementChild?.id === "loading");
+if (shouldRender) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
       <React.StrictMode>
