From 4dd3f65835fe76279391c62e8aac59529c7f6936 Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Tue, 18 Aug 2026 01:52:36 +0900
Subject: [PATCH] web/components/shell: fix logged-out topbar showing a
 permanent loading skeleton

Signed-off-by: dawn <dawn@tangled.org>
---
 web/src/lib/auth.svelte.ts                    | 11 ++---
 .../components/shell/Topbar.stories.svelte    |  4 ++
 web/src/lib/components/shell/Topbar.svelte    | 44 ++++++++-----------
 web/src/routes/+layout.svelte                 |  5 +--
 4 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/web/src/lib/auth.svelte.ts b/web/src/lib/auth.svelte.ts
index ea64139d..7bb38808 100644
--- a/web/src/lib/auth.svelte.ts
+++ b/web/src/lib/auth.svelte.ts
@@ -90,8 +90,7 @@ export interface Auth {
 	readonly currentDid: Did | null;
 	readonly profile: AuthProfile | null;
 	readonly error: string | null;
-	readonly profileLoading: boolean;
-	readonly authenticating: boolean;
+	readonly resolving: boolean;
 	readonly currentUser: CurrentUser | null;
 	readonly accounts: AuthAccount[];
 	hasAccount(did: string): boolean;
@@ -473,15 +472,13 @@ export const createAuth = (
 		get error() {
 			return state.kind === "failed" ? state.message : null;
 		},
-		get profileLoading() {
+		get resolving() {
 			return (
+				state.kind === "authenticating" ||
 				state.kind === "profile-loading" ||
-				(state.kind === "loading" && state.did !== null && state.profile === null)
+				(state.kind === "loading" && state.did === null)
 			);
 		},
-		get authenticating() {
-			return state.kind === "authenticating";
-		},
 		get currentUser() {
 			const did = currentDid();
 			if (!did) return null;
diff --git a/web/src/lib/components/shell/Topbar.stories.svelte b/web/src/lib/components/shell/Topbar.stories.svelte
index ba326cba..293657cf 100644
--- a/web/src/lib/components/shell/Topbar.stories.svelte
+++ b/web/src/lib/components/shell/Topbar.stories.svelte
@@ -23,6 +23,10 @@
 
 <Story name="Signed out" args={{ variant: "marketing", user: null }} />
 
+<Story name="Signed out app" args={{ user: null }} />
+
+<Story name="Resolving session" args={{ user: null, loading: true }} />
+
 <Story
 	name="Switching account"
 	args={{ accounts, onSwitchAccount: fn() }}
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index adb93bba..c5d42ca1 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -13,8 +13,8 @@
 			action: "flex items-center",
 			divider: "mx-2 hidden h-6 w-px self-center rounded-md bg-background-inset md:block",
 			link: "flex items-center text-foreground-default transition-colors hover:text-foreground-muted",
-			identity: "flex items-center",
-			ball: "size-8 rounded-full bg-background-inset md:size-5",
+			identity: "flex items-center gap-1",
+			ball: "flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-placeholder md:size-5",
 			bar: "hidden h-4 w-24 rounded-sm bg-background-inset md:block",
 			switchHeader: "px-2 py-1.5 typography-paragraph-small text-foreground-muted",
 			addBall:
@@ -27,18 +27,7 @@
 					nav: "border-b border-border-default bg-background-default",
 					actions: "gap-2"
 				}
-			},
-			// The signing-in placeholder wraps a spinner.
-			pending: {
-				true: {
-					identity: "gap-1",
-					ball: "flex items-center justify-center border border-border-default text-foreground-placeholder"
-				},
-				false: { identity: "gap-2" }
 			}
-		},
-		defaultVariants: {
-			pending: false
 		}
 	});
 
@@ -73,7 +62,7 @@
 		onSwitchAccount?: (did: AuthAccount["did"]) => void | Promise<void>;
 		user: CurrentUser | null;
 		accounts?: readonly AuthAccount[];
-		addAccountHref?: string;
+		loginHref?: string;
 		loading?: boolean;
 	}
 
@@ -83,7 +72,7 @@
 		onSwitchAccount,
 		user,
 		accounts = [],
-		addAccountHref = "/login",
+		loginHref = "/login",
 		loading = false
 	}: Props = $props();
 
@@ -176,12 +165,8 @@
 
 				<div class={style.action({ class: "order-4 md:order-5" })}>
 					{#if loading}
-						<div
-							class={style.identity({ pending: true })}
-							role="status"
-							aria-label="Signing in"
-						>
-							<span class={style.ball({ pending: true })}>
+						<div class={style.identity()} role="status" aria-label="Signing in">
+							<span class={style.ball()}>
 								<Spinner class="size-4" />
 							</span>
 							<span class={style.bar()} aria-hidden="true"></span>
@@ -210,7 +195,7 @@
 									</DropdownItem>
 								{/each}
 							{/if}
-							<DropdownItem href={addAccountHref}>
+							<DropdownItem href={loginHref}>
 								<span class={style.addBall()}>
 									<Plus class="size-2.5" aria-hidden="true" />
 								</span>
@@ -232,9 +217,18 @@
 							>
 						</Dropdown>
 					{:else}
-						<div class={style.identity()} aria-hidden="true">
-							<span class={style.ball()}></span>
-							<span class={style.bar()}></span>
+						<div class={style.identity({ class: "gap-2" })}>
+							<Button variant="ghost" size="small" href={appPath(loginHref)}
+								>Login</Button
+							>
+							<Button
+								variant="primary"
+								size="small"
+								href={resolve("/signup")}
+								insetShadow={true}
+							>
+								Join now
+							</Button>
 						</div>
 					{/if}
 				</div>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 40e622cb..62e24ea3 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -73,10 +73,9 @@
 			<Topbar
 				user={auth.currentUser}
 				accounts={auth.accounts}
-				addAccountHref={`/login?return_url=${encodeURIComponent(page.url.pathname)}`}
+				loginHref={`/login?return_url=${encodeURIComponent(page.url.pathname)}`}
 				variant={topbarVariant}
-				loading={auth.state.kind === "authenticating" ||
-					auth.state.kind === "profile-loading"}
+				loading={auth.resolving}
 				onSignOut={signOut}
 				onSwitchAccount={switchAccount}
 			/>
-- 
2.51.2