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:
@@ -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(
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user