From d2d1e7d362c7cd8c91d6e82acbdbd8a121fdf16a Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Fri, 31 Jul 2026 15:33:15 +0000
Subject: [PATCH] web/settings: reserve layout with skeletons instead of a load spinner

Renders each settings tab's structure immediately and swaps same-size skeleton
placeholders for the real controls while data loads, so a hard refresh doesn't
flash a spinner or shift the bounding box. Adds a shared Skeleton component.
---
 web/src/lib/components/ui/Skeleton.svelte | 12 ++++++++++++
 web/src/lib/components/settings/tabs/KeysTab.svelte | 22 ++++++++++++++++------
 web/src/lib/components/settings/tabs/NotificationsTab.svelte | 43 ++++++++++++++++++++++---------------------
 web/src/lib/components/settings/tabs/SitesTab.svelte | 15 +++++++++++----
 4 file(s) changed, 61 insertion(s)(+), 31 deletion(s)(-)

diff --git a/web/src/lib/components/ui/Skeleton.svelte b/web/src/lib/components/ui/Skeleton.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/lib/components/ui/Skeleton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	// a neutral pulsing placeholder used to reserve a control's space while data
+	// loads, so tabs fill in without a spinner or bounding-box shift. the caller
+	// sets size and rounding via `class` (e.g. "h-4.5 w-8.25 rounded-full").
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = "" }: Props = $props();
+</script>
+
+<span class="block animate-pulse bg-background-muted {className}" aria-hidden="true"></span>
diff --git a/web/src/lib/components/settings/tabs/KeysTab.svelte b/web/src/lib/components/settings/tabs/KeysTab.svelte
--- a/web/src/lib/components/settings/tabs/KeysTab.svelte
+++ b/web/src/lib/components/settings/tabs/KeysTab.svelte
@@ -8,7 +8,7 @@
 		type PublicKeyRecord
 	} from "$lib/api/settings";
 	import Button from "$lib/components/ui/Button.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import Skeleton from "$lib/components/ui/Skeleton.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
@@ -91,11 +91,21 @@
 	<ErrorAlert label={removeKey.error} />
 
 	{#if loaded.loading}
-		<div
-			class="flex items-center justify-center gap-2 p-4 typography-paragraph-regular text-foreground-subtle"
-		>
-			<Spinner /> Loading…
-		</div>
+		<!-- skeleton rows hold the list's height so it doesn't collapse then expand -->
+		<SettingsList>
+			{#each [0, 1] as row (row)}
+				<div class="flex w-full items-center justify-between gap-4">
+					<div class="flex min-w-0 items-center gap-3">
+						<Skeleton class="size-4 shrink-0 rounded-full" />
+						<div class="flex flex-col gap-1.5">
+							<Skeleton class="h-4 w-32 rounded-sm" />
+							<Skeleton class="h-3 w-56 rounded-sm" />
+						</div>
+					</div>
+					<Skeleton class="h-8 w-20 shrink-0 rounded-sm" />
+				</div>
+			{/each}
+		</SettingsList>
 	{:else if loaded.data?.keys.length === 0}
 		<SettingsEmpty message="No keys added yet" />
 	{:else if loaded.data}
diff --git a/web/src/lib/components/settings/tabs/NotificationsTab.svelte b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
--- a/web/src/lib/components/settings/tabs/NotificationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
@@ -11,7 +11,7 @@
 	} from "$lib/api/notifications";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import Skeleton from "$lib/components/ui/Skeleton.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsList from "../SettingsList.svelte";
@@ -158,24 +158,25 @@
 <ErrorAlert label={loaded.error} />
 <ErrorAlert label={save.error} />
 
-{#if loaded.loading}
-	<div class="flex items-center justify-center gap-2 p-4 typography-paragraph-small text-foreground-subtle">
-		<Spinner /> Loading…
-	</div>
-{:else}
-	<SettingsList>
-		{#each prefs as pref (pref.key)}
-			{@const Glyph = pref.icon}
-			<div class="flex w-full items-center justify-between gap-4">
-				<div class="flex min-w-0 flex-col gap-1">
-					<span class="flex items-center gap-2">
-						<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
-						<span class="typography-paragraph-regular text-foreground-default">{pref.label}</span>
-					</span>
-					<span class="typography-paragraph-regular text-foreground-muted">{pref.description}</span>
-				</div>
-				<Toggle bind:checked={pref.enabled} disabled={save.loading} aria-label={pref.label} />
+<!-- the full list renders immediately (even server-side) so the layout is
+	stable; only the toggle values fill in once loaded, swapping a same-size
+	skeleton for the real control to avoid a spinner and any bounding-box shift. -->
+<SettingsList>
+	{#each prefs as pref (pref.key)}
+		{@const Glyph = pref.icon}
+		<div class="flex w-full items-center justify-between gap-4">
+			<div class="flex min-w-0 flex-col gap-1">
+				<span class="flex items-center gap-2">
+					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
+					<span class="typography-paragraph-regular text-foreground-default">{pref.label}</span>
+				</span>
+				<span class="typography-paragraph-regular text-foreground-muted">{pref.description}</span>
 			</div>
-		{/each}
-	</SettingsList>
-{/if}
+			{#if loaded.loading}
+				<Skeleton class="h-4.5 w-8.25 shrink-0 rounded-full" />
+			{:else}
+				<Toggle bind:checked={pref.enabled} disabled={save.loading} aria-label={pref.label} />
+			{/if}
+		</div>
+	{/each}
+</SettingsList>
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -7,8 +7,8 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Skeleton from "$lib/components/ui/Skeleton.svelte";
 	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
@@ -99,9 +99,16 @@
 	{/if}
 
 	{#if loaded.loading}
-		<div class="flex items-center justify-center gap-2 p-4 typography-paragraph-small text-foreground-subtle">
-			<Spinner /> Loading…
-		</div>
+		<!-- stable-height skeleton row so the box doesn't collapse then expand -->
+		<SettingsList>
+			<div class="flex w-full items-center justify-between gap-4">
+				<div class="flex items-center gap-2">
+					<Skeleton class="size-4 shrink-0 rounded-full" />
+					<Skeleton class="h-4 w-40 rounded-sm" />
+				</div>
+				<Skeleton class="h-8 w-24 shrink-0 rounded-sm" />
+			</div>
+		</SettingsList>
 	{:else if loaded.data}
 		<SettingsList>
 			<SettingsEntry icon={Globe} title={loaded.data}>

--
tangled.sh