From 0c395e9f1bba17524f1ad95d79f699399d1a3ec6 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 14 Jun 2026 10:10:14 +0100
Subject: [PATCH] fix(org-site): stabilize landing-page nav auth button

The auth button derived from stores that hydrate in stages, so it
flashed through Login -> Dashboard -> Go to LMS as isLoggedIn and the
role/basePath settled at different times. Gate the label on
appInitApi.isInitializedAndReady so it only renders once the account
(and thus role) has loaded, and show a spinner in the button while a
logged-in user's experience resolves. Add separate loading and disabled
flags to authAction and wire them through all theme navs.
---
 .../landing-page/landing-page.svelte          | 27 +++++++++++--------
 .../custom/org-landing-page/bold/nav.svelte   | 10 ++++++-
 .../org-landing-page/classic/nav.svelte       |  4 +++
 .../org-landing-page/corporate/nav.svelte     | 10 ++++++-
 .../org-landing-page/editorial/nav.svelte     |  4 +++
 .../org-landing-page/minimal/nav.svelte       | 10 ++++++-
 .../custom/org-landing-page/saas/nav.svelte   | 11 +++++++-
 .../custom/org-landing-page/studio/nav.svelte | 10 ++++++-
 .../custom/org-landing-page/tech/nav.svelte   |  4 +++
 .../org-landing-page/terminal/nav.svelte      |  4 +++
 .../ui/src/custom/org-landing-page/types.ts   |  4 +++
 .../org-landing-page/vibrant/nav.svelte       |  4 +++
 12 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte b/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte
index f6bb11df..5b0ade71 100644
--- a/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte
+++ b/apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte
@@ -4,6 +4,7 @@
   import type { Component } from 'svelte';
 
   import { orgApi } from '$features/org/api/org.svelte';
+  import { appInitApi } from '$features/app/init.svelte';
   import PageLoader from './page-loader.svelte';
   import type { AccountOrg } from '$features/app/types';
   import {
@@ -26,17 +27,21 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let ThemeComponent = $state<Component<any> | null>(null);
 
-  const authAction = $derived(
-    $user.isLoggedIn
-      ? {
-          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
-          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
-        }
-      : {
-          label: t.get('navigation.login'),
-          href: '/login'
-        }
-  );
+  const authAction = $derived.by(() => {
+    if (!$user.isLoggedIn) {
+      return { label: t.get('navigation.login'), href: '/login' };
+    }
+
+    if (!appInitApi.isInitializedAndReady) {
+      return { label: '', href: '#', loading: true };
+    }
+
+    const goToLms = $basePath === '/lms' || $basePath === '#';
+    return {
+      label: t.get(goToLms ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+      href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+    };
+  });
 
   const landingPageProps = $derived(
     buildOrgLandingPageProps(
diff --git a/packages/ui/src/custom/org-landing-page/bold/nav.svelte b/packages/ui/src/custom/org-landing-page/bold/nav.svelte
index 29bd9192..47ac36bd 100644
--- a/packages/ui/src/custom/org-landing-page/bold/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/bold/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -41,7 +43,13 @@
           {/each}
         </nav>
         {#if authAction}
-          <Button href={authAction.href} variant="outline" class="ui:rounded-xl ui:font-bold">
+          <Button
+            href={authAction.href}
+            loading={authAction.loading}
+            disabled={authAction.disabled}
+            variant="outline"
+            class="ui:rounded-xl ui:font-bold"
+          >
             {authAction.label}
           </Button>
         {/if}
diff --git a/packages/ui/src/custom/org-landing-page/classic/nav.svelte b/packages/ui/src/custom/org-landing-page/classic/nav.svelte
index 83f707f3..11683f11 100644
--- a/packages/ui/src/custom/org-landing-page/classic/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/classic/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -41,6 +43,8 @@
         {#if authAction}
           <Button
             href={authAction.href}
+            loading={authAction.loading}
+            disabled={authAction.disabled}
             variant="outline"
             class="ui:bg-transparent ui:text-[var(--landing-bg)] ui:border-[var(--landing-bg)]/40 ui:hover:bg-[var(--landing-bg)]/10 ui:hover:text-[var(--landing-bg)] ui:hover:border-[var(--landing-bg)]/60"
           >
diff --git a/packages/ui/src/custom/org-landing-page/corporate/nav.svelte b/packages/ui/src/custom/org-landing-page/corporate/nav.svelte
index f105facd..49ec39cb 100644
--- a/packages/ui/src/custom/org-landing-page/corporate/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/corporate/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -47,7 +49,13 @@
 
         <div class="ui:flex ui:items-center ui:gap-3">
           {#if authAction}
-            <Button href={authAction.href} size="sm" class="ui:rounded-none ui:px-4 ui:font-medium">
+            <Button
+              href={authAction.href}
+              loading={authAction.loading}
+              disabled={authAction.disabled}
+              size="sm"
+              class="ui:rounded-none ui:px-4 ui:font-medium"
+            >
               {authAction.label}
             </Button>
           {/if}
diff --git a/packages/ui/src/custom/org-landing-page/editorial/nav.svelte b/packages/ui/src/custom/org-landing-page/editorial/nav.svelte
index b390e25d..96c30f2b 100644
--- a/packages/ui/src/custom/org-landing-page/editorial/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/editorial/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -50,6 +52,8 @@
           {#if authAction}
             <Button
               href={authAction.href}
+              loading={authAction.loading}
+              disabled={authAction.disabled}
               size="sm"
               class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:hover:opacity-90"
             >
diff --git a/packages/ui/src/custom/org-landing-page/minimal/nav.svelte b/packages/ui/src/custom/org-landing-page/minimal/nav.svelte
index 2138eee9..ca39d8cc 100644
--- a/packages/ui/src/custom/org-landing-page/minimal/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/minimal/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -46,7 +48,13 @@
         {/each}
       </nav>
       {#if authAction}
-        <Button href={authAction.href} variant="outline" class="ui:rounded-full">
+        <Button
+          href={authAction.href}
+          loading={authAction.loading}
+          disabled={authAction.disabled}
+          variant="outline"
+          class="ui:rounded-full"
+        >
           {authAction.label}
         </Button>
       {/if}
diff --git a/packages/ui/src/custom/org-landing-page/saas/nav.svelte b/packages/ui/src/custom/org-landing-page/saas/nav.svelte
index a1a5997f..6831c44e 100644
--- a/packages/ui/src/custom/org-landing-page/saas/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/saas/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -45,7 +47,14 @@
 
     <div class="ui:flex ui:items-center ui:gap-1.5">
       {#if authAction}
-        <Button href={authAction.href} variant="default" size="sm" class="ui:rounded-full ui:px-4">
+        <Button
+          href={authAction.href}
+          loading={authAction.loading}
+          disabled={authAction.disabled}
+          variant="default"
+          size="sm"
+          class="ui:rounded-full ui:px-4"
+        >
           {authAction.label}
         </Button>
       {/if}
diff --git a/packages/ui/src/custom/org-landing-page/studio/nav.svelte b/packages/ui/src/custom/org-landing-page/studio/nav.svelte
index aa627c43..617c3ad0 100644
--- a/packages/ui/src/custom/org-landing-page/studio/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/studio/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -49,7 +51,13 @@
 
         <div class="ui:justify-self-end ui:flex ui:items-center ui:gap-1">
           {#if authAction}
-            <Button href={authAction.href} size="sm" class="ui:rounded-md ui:px-3.5">
+            <Button
+              href={authAction.href}
+              loading={authAction.loading}
+              disabled={authAction.disabled}
+              size="sm"
+              class="ui:rounded-md ui:px-3.5"
+            >
               {authAction.label}
             </Button>
           {/if}
diff --git a/packages/ui/src/custom/org-landing-page/tech/nav.svelte b/packages/ui/src/custom/org-landing-page/tech/nav.svelte
index 79ead309..e2c5e793 100644
--- a/packages/ui/src/custom/org-landing-page/tech/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/tech/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -44,6 +46,8 @@
     {#if authAction}
       <Button
         href={authAction.href}
+        loading={authAction.loading}
+        disabled={authAction.disabled}
         size="sm"
         variant="outline"
         class="ui:rounded-none ui:font-semibold ui:border-[var(--landing-accent-fg)] ui:text-[var(--landing-accent-fg)] ui:bg-transparent ui:hover:bg-[var(--landing-accent-fg)]/10 ui:hover:text-[var(--landing-accent-fg)]"
diff --git a/packages/ui/src/custom/org-landing-page/terminal/nav.svelte b/packages/ui/src/custom/org-landing-page/terminal/nav.svelte
index ba039f23..ebcb8358 100644
--- a/packages/ui/src/custom/org-landing-page/terminal/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/terminal/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -60,6 +62,8 @@
           {#if authAction}
             <Button
               href={authAction.href}
+              loading={authAction.loading}
+              disabled={authAction.disabled}
               size="sm"
               variant="outline"
               class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-transparent ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-white/5"
diff --git a/packages/ui/src/custom/org-landing-page/types.ts b/packages/ui/src/custom/org-landing-page/types.ts
index 3d5fafad..a90bcbc5 100644
--- a/packages/ui/src/custom/org-landing-page/types.ts
+++ b/packages/ui/src/custom/org-landing-page/types.ts
@@ -297,6 +297,8 @@ export interface CourseLandingPageProps {
   authAction?: {
     label: string;
     href: string;
+    loading?: boolean;
+    disabled?: boolean;
   };
   hero: {
     heading: string;
@@ -327,6 +329,8 @@ export interface OrgLandingPageProps {
   authAction?: {
     label: string;
     href: string;
+    loading?: boolean;
+    disabled?: boolean;
   };
   hero: {
     heading: string;
diff --git a/packages/ui/src/custom/org-landing-page/vibrant/nav.svelte b/packages/ui/src/custom/org-landing-page/vibrant/nav.svelte
index d269126f..d2b0ef9b 100644
--- a/packages/ui/src/custom/org-landing-page/vibrant/nav.svelte
+++ b/packages/ui/src/custom/org-landing-page/vibrant/nav.svelte
@@ -10,6 +10,8 @@
     authAction?: {
       label: string;
       href: string;
+      loading?: boolean;
+      disabled?: boolean;
     };
   }
 
@@ -58,6 +60,8 @@
           <div class="ui:flex ui:items-center ui:gap-4">
             <Button
               href={authAction.href}
+              loading={authAction.loading}
+              disabled={authAction.disabled}
               size="sm"
               class="ui:rounded-md ui:px-4 ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
             >