From 9e99ed927012c554bafb6f63bd16810997d12615 Mon Sep 17 00:00:00 2001
From: SilkePilon <silkepilon2009@gmail.com>
Date: Sat, 8 Aug 2026 17:02:50 +0200
Subject: [PATCH] fix: don't flash logged-out UI while the user is still
 loading

Web auth is cookie based, so the client can't tell synchronously whether
you're signed in. `UserService.user` starts as `undefined` and only gets
populated once `GET /api/user` comes back, which meant `undefined` stood
for both "still fetching" and "logged out".

Consumers read it as "logged out" on the first frame. The profile page
showed "It looks like you're not logged in" until the fetch resolved, and
the header flashed the Log in / Sign up buttons. The rules and reviews
pages had it worse: they redirected you to home before the fetch had a
chance to finish, so refreshing either page while signed in bounced you
out.

`UserService` now exposes a `loaded` store that flips once the initial
fetch settles, and the pages wait for it before rendering logged-out UI
or redirecting.

Conditions are ordered so `$user` is read before `$userLoaded`. Svelte
only subscribes to a store when the expression reading it actually runs,
so short circuiting on `$userLoaded` first would leave `$user`
unsubscribed, the fetch never started, and the page stuck loading.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/lib/components/HeaderAuthSection.svelte   |  9 ++++++++-
 apps/web/src/lib/user/userService.ts                   |  8 ++++++++
 .../[ownerSlug]/[projectSlug]/reviews/+page.svelte     |  3 ++-
 .../src/routes/(app)/[ownerSlug]/rules/+page.svelte    |  3 ++-
 .../organizations/invite/[slug]/[code]/+page.svelte    |  7 ++++++-
 apps/web/src/routes/(app)/profile/+page.svelte         | 10 +++++++++-
 6 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/lib/components/HeaderAuthSection.svelte b/apps/web/src/lib/components/HeaderAuthSection.svelte
index 70bed435e5e..00d6d700187 100644
--- a/apps/web/src/lib/components/HeaderAuthSection.svelte
+++ b/apps/web/src/lib/components/HeaderAuthSection.svelte
@@ -14,10 +14,13 @@
 
 	const userService = inject(USER_SERVICE);
 	const user = $derived(userService.user);
+	const userLoaded = $derived(userService.loaded);
 	const routes = inject(WEB_ROUTES_SERVICE);
 </script>
 
-{#if $user && !hideIfUserAuthenticated}
+{#if !$user && !$userLoaded}
+	<div class="auth-placeholder"></div>
+{:else if $user && !hideIfUserAuthenticated}
 	<UserAuthAvatar user={$user} />
 {:else if !$user}
 	<div class="login-signup-wrap">
@@ -27,6 +30,10 @@
 {/if}
 
 <style lang="postcss">
+	.auth-placeholder {
+		height: var(--size-button);
+	}
+
 	.login-signup-wrap {
 		display: flex;
 		align-items: center;
diff --git a/apps/web/src/lib/user/userService.ts b/apps/web/src/lib/user/userService.ts
index cfa523ba0e2..bf1c95eceb9 100644
--- a/apps/web/src/lib/user/userService.ts
+++ b/apps/web/src/lib/user/userService.ts
@@ -30,6 +30,8 @@ export type LoadablePatchStacks = Loadable<Branch[]> & { ownerSlug: string };
 export const USER_SERVICE = new InjectionToken<UserService>("UserService");
 
 export class UserService {
+	readonly loaded: Writable<boolean> = writable(false);
+
 	user: Writable<User | undefined> = writable<User | undefined>(undefined, (set) => {
 		this.fetchUser()
 			.then((data) => {
@@ -38,6 +40,9 @@ export class UserService {
 			})
 			.catch((err) => {
 				this.error.set(err);
+			})
+			.finally(() => {
+				this.loaded.set(true);
 			});
 	});
 
@@ -61,6 +66,9 @@ export class UserService {
 					})
 					.catch((err) => {
 						this.error.set(err);
+					})
+					.finally(() => {
+						this.loaded.set(true);
 					});
 			} else if (!available) {
 				// If authentication is no longer available, clear the user
diff --git a/apps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/+page.svelte b/apps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/+page.svelte
index fe4a6222d55..b64d3db41b6 100644
--- a/apps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/+page.svelte
+++ b/apps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/+page.svelte
@@ -17,10 +17,11 @@
 	const routes = inject(WEB_ROUTES_SERVICE);
 	const userService = inject(USER_SERVICE);
 	const user = userService.user;
+	const userLoaded = userService.loaded;
 
 	// If there is no user (user not logged in), redirect to home
 	$effect(() => {
-		if ($user === undefined) {
+		if ($user === undefined && $userLoaded) {
 			goto(routes.homePath());
 		}
 	});
diff --git a/apps/web/src/routes/(app)/[ownerSlug]/rules/+page.svelte b/apps/web/src/routes/(app)/[ownerSlug]/rules/+page.svelte
index c608c2ee2e9..712be94ea67 100644
--- a/apps/web/src/routes/(app)/[ownerSlug]/rules/+page.svelte
+++ b/apps/web/src/routes/(app)/[ownerSlug]/rules/+page.svelte
@@ -14,10 +14,11 @@
 	const routes = inject(WEB_ROUTES_SERVICE);
 	const userService = inject(USER_SERVICE);
 	const user = userService.user;
+	const userLoaded = userService.loaded;
 
 	// If there is no user (user not logged in), redirect to home
 	$effect(() => {
-		if ($user === undefined) {
+		if ($user === undefined && $userLoaded) {
 			goto(routes.homePath());
 		}
 	});
diff --git a/apps/web/src/routes/(app)/organizations/invite/[slug]/[code]/+page.svelte b/apps/web/src/routes/(app)/organizations/invite/[slug]/[code]/+page.svelte
index 78fe192cdc9..41d3412e5b5 100644
--- a/apps/web/src/routes/(app)/organizations/invite/[slug]/[code]/+page.svelte
+++ b/apps/web/src/routes/(app)/organizations/invite/[slug]/[code]/+page.svelte
@@ -14,6 +14,7 @@
 	const organizationService = inject(ORGANIZATION_SERVICE);
 
 	const user = $derived(userService.user);
+	const userLoaded = $derived(userService.loaded);
 
 	// Get the org slug and invite code from the route parameters
 	const inviteCode = $derived($page.params.code!);
@@ -100,7 +101,11 @@
 	<div class="invite-card">
 		<h1>Organization Invitation</h1>
 
-		{#if !isLoggedIn}
+		{#if !isLoggedIn && !$userLoaded}
+			<div class="loading-container">
+				<p>Checking your invitation...</p>
+			</div>
+		{:else if !isLoggedIn}
 			<p>You've been invited to join <strong>{slug}</strong>.</p>
 			<p>Please log in to continue.</p>
 			<Button onclick={goToLogin} style="pop">Log In</Button>
diff --git a/apps/web/src/routes/(app)/profile/+page.svelte b/apps/web/src/routes/(app)/profile/+page.svelte
index 98f5024d9a8..c79871bf809 100644
--- a/apps/web/src/routes/(app)/profile/+page.svelte
+++ b/apps/web/src/routes/(app)/profile/+page.svelte
@@ -29,6 +29,7 @@
 	);
 
 	const user = $derived(userService.user);
+	const userLoaded = $derived(userService.loaded);
 
 	const detectedOS = $derived.by(() => {
 		const os = getOS();
@@ -83,7 +84,9 @@
 	<title>GitButler | User</title>
 </svelte:head>
 
-{#if !$user?.id}
+{#if !$user?.id && !$userLoaded}
+	<div class="loading-user"></div>
+{:else if !$user?.id}
 	<div class="not-logged-in">
 		<h3 class="text-18 text-bold">It looks like you're not logged in</h3>
 		<p class="text-14 text-body clr-text-2">
@@ -274,6 +277,11 @@
 </Modal>
 
 <style lang="postcss">
+	.loading-user {
+		grid-column: full-start / full-end;
+		min-height: 100%;
+	}
+
 	.not-logged-in {
 		display: flex;
 		row-gap: 10px;