From 6d3267d9c90faa04f5273e47ebb2e33f087b3468 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Wed, 28 Jan 2026 03:04:19 +1030
Subject: [PATCH] style(databases): add loading state to confirm and cancel
 buttons

---
 src/lib/client/ui/modal/Modal.svelte | 19 ++++++++++++++-----
 src/routes/databases/+page.svelte    | 10 +++++++---
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/lib/client/ui/modal/Modal.svelte b/src/lib/client/ui/modal/Modal.svelte
index 1114daf..39d0763 100644
--- a/src/lib/client/ui/modal/Modal.svelte
+++ b/src/lib/client/ui/modal/Modal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
-	import { X, Check } from 'lucide-svelte';
+	import { X, Check, Loader2 } from 'lucide-svelte';
 
 	// Props
 	export let open = false;
@@ -10,6 +10,7 @@
 	export let cancelText = 'Cancel';
 	export let confirmDanger = false; // If true, confirm button is styled as danger (red)
 	export let confirmDisabled = false;
+	export let loading = false; // Shows spinner and disables buttons
 	export let size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
 	export let height: 'auto' | 'md' | 'lg' | 'xl' | 'full' = 'auto';
 
@@ -95,7 +96,10 @@
 				<button
 					type="button"
 					on:click={handleCancel}
-					class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800"
+					disabled={loading}
+					class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800 {loading
+						? 'cursor-not-allowed opacity-50'
+						: ''}"
 				>
 					<X size={16} />
 					{cancelText}
@@ -103,14 +107,19 @@
 				<button
 					type="button"
 					on:click={handleConfirm}
-					disabled={confirmDisabled}
+					disabled={confirmDisabled || loading}
 					class="{confirmDanger
 						? 'border border-red-600 bg-red-600 hover:bg-red-700 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600'
-						: 'bg-accent-600 hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600'} flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors {confirmDisabled
+						: 'bg-accent-600 hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600'} flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors {confirmDisabled ||
+					loading
 						? 'cursor-not-allowed opacity-50'
 						: ''}"
 				>
-					<Check size={16} />
+					{#if loading}
+						<Loader2 size={16} class="animate-spin" />
+					{:else}
+						<Check size={16} />
+					{/if}
 					{confirmText}
 				</button>
 			</div>
diff --git a/src/routes/databases/+page.svelte b/src/routes/databases/+page.svelte
index 4a42085..09ec1e7 100644
--- a/src/routes/databases/+page.svelte
+++ b/src/routes/databases/+page.svelte
@@ -4,7 +4,7 @@
 		Plus,
 		Lock,
 		Code,
-		Trash2,
+		Unlink,
 		ExternalLink,
 		ChevronRight,
 		Info
@@ -44,6 +44,7 @@
 	let showInfoModal = false;
 	let selectedDatabase: DatabaseInstance | null = null;
 	let unlinkFormElement: HTMLFormElement;
+	let unlinkLoading = false;
 
 	// Track loaded images
 	let loadedImages: Set<number> = new Set();
@@ -188,7 +189,7 @@
 						<TableActionButton icon={ExternalLink} title="View on GitHub" />
 					</a>
 					<TableActionButton
-						icon={Trash2}
+						icon={Unlink}
 						title="Unlink database"
 						variant="danger"
 						on:click={(e) => handleUnlinkClick(e, row)}
@@ -207,9 +208,10 @@
 	confirmText="Unlink"
 	cancelText="Cancel"
 	confirmDanger={true}
+	loading={unlinkLoading}
 	on:confirm={() => {
-		showUnlinkModal = false;
 		if (selectedDatabase) {
+			unlinkLoading = true;
 			unlinkFormElement?.requestSubmit();
 		}
 	}}
@@ -227,6 +229,8 @@
 	class="hidden"
 	use:enhance={() => {
 		return async ({ result, update }) => {
+			unlinkLoading = false;
+			showUnlinkModal = false;
 			if (result.type === 'failure' && result.data) {
 				alertStore.add(
 					'error',