From a8d2b30c78cf5a4d44acc6cb7220512281e61e36 Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Fri, 11 Sep 2026 06:33:26 +0300
Subject: [PATCH] web: show a spinner on the settings save bar

Signed-off-by: dawn <dawn@tangled.org>
---
 .../lib/components/settings/RepoGeneralForm.svelte    |  4 ++--
 .../lib/components/settings/SettingsSaveBar.svelte    | 11 +++++++++--
 .../[handle]/[repo]/settings/pipelines/+page.svelte   |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/settings/RepoGeneralForm.svelte b/web/src/lib/components/settings/RepoGeneralForm.svelte
index 28e5e6310..7ca45e86a 100644
--- a/web/src/lib/components/settings/RepoGeneralForm.svelte
+++ b/web/src/lib/components/settings/RepoGeneralForm.svelte
@@ -132,7 +132,7 @@
 
 <SettingsHeader title="General">
 	{#snippet action()}
-		<SettingsSaveBar {dirty} onreset={reset} onsave={save.run} />
+		<SettingsSaveBar {dirty} saving={save.loading} onreset={reset} onsave={save.run} />
 	{/snippet}
 </SettingsHeader>
 
@@ -296,7 +296,7 @@
 </div>
 
 <div class="flex w-full justify-end">
-	<SettingsSaveBar {dirty} onreset={reset} onsave={save.run} />
+	<SettingsSaveBar {dirty} saving={save.loading} onreset={reset} onsave={save.run} />
 </div>
 
 <Modal
diff --git a/web/src/lib/components/settings/SettingsSaveBar.svelte b/web/src/lib/components/settings/SettingsSaveBar.svelte
index 40ecf1ae4..7c0d84021 100644
--- a/web/src/lib/components/settings/SettingsSaveBar.svelte
+++ b/web/src/lib/components/settings/SettingsSaveBar.svelte
@@ -5,11 +5,12 @@
 
 	interface Props {
 		dirty: boolean;
+		saving?: boolean;
 		onreset?: () => void;
 		onsave?: () => void;
 	}
 
-	let { dirty, onreset, onsave }: Props = $props();
+	let { dirty, saving = false, onreset, onsave }: Props = $props();
 </script>
 
 <div class="flex shrink-0 items-center gap-4">
@@ -17,5 +18,11 @@
 		<Button icon={RotateCcw} onclick={onreset}>Reset</Button>
 		<span class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span>
 	{/if}
-	<Button variant="primary" icon={Save} disabled={!dirty} onclick={onsave}>Save</Button>
+	<Button
+		variant="primary"
+		icon={Save}
+		disabled={!dirty || saving}
+		loading={saving}
+		onclick={onsave}>Save</Button
+	>
 </div>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index 9040f444b..f9ffa4533 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -79,7 +79,7 @@
 	{#snippet action()}
 		<div class="flex items-center gap-4">
 			{#if owner}
-				<SettingsSaveBar {dirty} onreset={reset} onsave={save.run} />
+				<SettingsSaveBar {dirty} saving={save.loading} onreset={reset} onsave={save.run} />
 			{/if}
 			<DocsButton href="https://docs.tangled.org/spindles" />
 		</div>
-- 
2.51.2