Fix logged-out UI flashing on account pages

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;

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

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());
 		}
 	});

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());
 		}
 	});

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>

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;