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.

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(
+  const authAction = $derived.by(() => {
-    $user.isLoggedIn
+    if (!$user.isLoggedIn) {
-      ? {
+      return { label: t.get('navigation.login'), href: '/login' };
-          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+    }
-          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+
-        }
+    if (!appInitApi.isInitializedAndReady) {
-      : {
+      return { label: '', href: '#', loading: true };
-          label: t.get('navigation.login'),
+    }
-          href: '/login'
+
-        }
+    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(

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}

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

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}

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

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}

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}

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}

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)]"

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"

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;

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