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.
This commit is contained in:
Rotimi Best
2026-06-14 10:10:14 +01:00
parent a411c50526
commit 0c395e9f1b
12 changed files with 86 additions and 16 deletions
@@ -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}
@@ -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"
>
@@ -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}
@@ -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"
>
@@ -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}
@@ -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}
@@ -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}
@@ -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)]"
@@ -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"
@@ -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;
@@ -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"
>