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/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>

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}
+      />
    );
 }

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

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>