From 509a2dae0bdffb3661fbe0597282609c227ee16d Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 11 Mar 2026 12:01:26 +0100
Subject: [PATCH] feat: add loading indicator to app layout

---
 apps/dashboard/src/app.html                 | 52 +++++++++++++++++++++
 apps/dashboard/src/routes/+layout.server.ts |  4 +-
 apps/dashboard/src/routes/+layout.svelte    |  5 ++
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/app.html b/apps/dashboard/src/app.html
index 62a2b94d..2a5f7dc0 100644
--- a/apps/dashboard/src/app.html
+++ b/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>
diff --git a/apps/dashboard/src/routes/+layout.server.ts b/apps/dashboard/src/routes/+layout.server.ts
index 86ca2ba5..97db59a1 100644
--- a/apps/dashboard/src/routes/+layout.server.ts
+++ b/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;
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index 498d974c..0a62179b 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/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;