feat: add loading indicator to app layout

apps/dashboard/src/app.html

@@ -10,9 +10,61 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
 
     %sveltekit.head%
+    <style id="app-loading-styles">
+      #app-loading-indicator {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+        z-index: 99999;
+      }
+      #app-loading-indicator .spinner {
+        width: 3.5rem;
+        height: 3.5rem;
+        color: #1d4ed8;
+        animation: app-loading-spin 1s linear infinite;
+      }
+      @keyframes app-loading-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      #app-loading-indicator p {
+        margin-top: 16px;
+        color: #6b7280;
+        font-family: system-ui, sans-serif;
+      }
+    </style>
   </head>
 
   <body data-sveltekit-preload-data="hover" class="">
+    <div id="app-loading-indicator">
+      <svg
+        class="spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        role="status"
+        aria-label="Loading"
+      >
+        <path d="M12 2v4" />
+        <path d="m16.2 7.8 2.9-2.9" />
+        <path d="M18 12h4" />
+        <path d="m16.2 16.2 2.9 2.9" />
+        <path d="M12 18v4" />
+        <path d="m4.9 19.1 2.9-2.9" />
+        <path d="M2 12h4" />
+        <path d="m4.9 4.9 2.9 2.9" />
+      </svg>
+      <p>Loading...</p>
+    </div>
     <div style="display: contents" class="theme-container">%sveltekit.body%</div>
   </body>
 </html>

apps/dashboard/src/routes/+layout.server.ts

@@ -1,10 +1,10 @@
 import type { AccountOrg } from '$features/app/types';
 import type { MetaTagsProps } from 'svelte-meta-tags';
 import { PUBLIC_IS_SELFHOSTED } from '$env/static/public';
-import { getOrgSiteInfo } from '$features/app/layout-setup';
 import { getBaseMetaTags } from '$lib/utils/functions/metaTags';
+import { getOrgSiteInfo } from '$features/app/layout-setup';
 
-export const ssr = PUBLIC_IS_SELFHOSTED === 'true' ? false : true;
+export const ssr = true;
 
 interface LoadOutput {
   orgSiteName: string;

apps/dashboard/src/routes/+layout.svelte

@@ -65,6 +65,11 @@
   }
 
   onMount(() => {
+    const loadingIndicator = document.getElementById('app-loading-indicator');
+    if (loadingIndicator) {
+      loadingIndicator.style.display = 'none';
+    }
+
     intialAppSetup();
 
     if (data.skipAuth) return;