add loading indicators

src/routes/(app)/+page.svelte

@@ -12,6 +12,7 @@
 	import toast from 'svelte-french-toast';
 	import RefreshCw from 'lucide-svelte/icons/refresh-cw';
 	import Copy from 'lucide-svelte/icons/copy';
+	import Loader2 from 'lucide-svelte/icons/loader-2';
 	import { createAvatar } from '@dicebear/core';
 	import { identicon } from '@dicebear/collection';
 	import { deriveMasterKey, deriveBip39MasterKey } from '$lib/crypto';
@@ -25,6 +26,7 @@
 	let currentAuthType: 'password' | 'bip39' = data.authType;
 	let avatarSvg = '';
 	let isMnemonicValid = false;
+	let isLoading = false;
 
 	$: {
 		if (passphrase) {
@@ -49,7 +51,11 @@
 	}
 
 	const handleEnter = async () => {
+		if (isLoading) return;
+
 		try {
+			isLoading = true;
+
 			if (currentAuthType === 'password') {
 				if (!passphrase) {
 					toast.error('Please enter a passphrase');
@@ -74,6 +80,8 @@
 			goto(`${base}/vault`);
 		} catch (error) {
 			toast.error('Error deriving key: ' + (error as Error).message);
+		} finally {
+			isLoading = false;
 		}
 	};
 
@@ -127,6 +135,7 @@
 								placeholder="Enter your passphrase"
 								bind:value={passphrase}
 								class="flex-grow"
+								disabled={isLoading}
 							/>
 							{#if avatarSvg}
 								<img src={avatarSvg} alt="Identicon" class="ml-2 h-8 w-8" />
@@ -148,6 +157,7 @@
 							onValueChange={(e) => {
 								$computationIntensity = e[0];
 							}}
+							disabled={isLoading}
 						/>
 					</div>
 				{:else}
@@ -160,10 +170,17 @@
 								bind:value={mnemonic}
 								rows="3"
 								class="w-full rounded-md border border-input bg-transparent px-3 py-2 pr-20 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+								disabled={isLoading}
 							></textarea>
 							<div class="absolute bottom-2 right-2 flex space-x-1">
 								{#if isMnemonicValid}
-									<Button size="sm" variant="ghost" on:click={copyMnemonic} title="Copy mnemonic">
+									<Button
+										size="sm"
+										variant="ghost"
+										on:click={copyMnemonic}
+										title="Copy mnemonic"
+										disabled={isLoading}
+									>
 										<Copy size={16} />
 									</Button>
 								{/if}
@@ -172,6 +189,7 @@
 									variant="ghost"
 									on:click={createMnemonic}
 									title="Create new mnemonic"
+									disabled={isLoading}
 								>
 									<RefreshCw size={16} />
 								</Button>
@@ -193,23 +211,30 @@
 							onValueChange={(e) => {
 								$computationIntensity = e[0];
 							}}
+							disabled={isLoading}
 						/>
 					</div>
 				{/if}
 
 				<div class="flex flex-col space-y-2">
 					<Button
 						on:click={handleEnter}
-						disabled={currentAuthType === 'password' ? !passphrase : !mnemonic}
+						disabled={currentAuthType === 'password' ? !passphrase : !mnemonic || isLoading}
 					>
-						Enter vault
+						{#if isLoading}
+							<Loader2 class="mr-2 h-4 w-4 animate-spin" />
+							Deriving master key...
+						{:else}
+							Enter vault
+						{/if}
 					</Button>
 					<Button
 						on:click={() => {
 							goto(`${base}/onboarding`);
 						}}
 						variant="outline"
 						class="mt-4"
+						disabled={isLoading}
 					>
 						How do you use DeriVault?
 					</Button>

src/routes/(app)/vault/+page.svelte

@@ -10,6 +10,7 @@
 	import Edit from 'lucide-svelte/icons/square-pen';
 	import LogOut from 'lucide-svelte/icons/log-out';
 	import Search from 'lucide-svelte/icons/search';
+	import Loader2 from 'lucide-svelte/icons/loader-2';
 	import DeletionButton from '$lib/components/DeletionButton.svelte';
 	import toast from 'svelte-french-toast';
 	import { base } from '$app/paths';
@@ -19,6 +20,7 @@
 
 	let hoveredSite: number | null = null;
 	let searchTerm = '';
+	let editingIndex: number | null = null;
 
 	$: siteList = data.sites;
 
@@ -28,8 +30,14 @@
 		toast.success('Site removed successfully');
 	}
 
-	function editSite(index: number) {
-		goto(`${base}/add?edit=${index}`);
+	async function editSite(index: number) {
+		if (editingIndex !== null) return; // Prevent multiple clicks
+		editingIndex = index;
+		try {
+			await goto(`${base}/add?edit=${index}`);
+		} finally {
+			editingIndex = null;
+		}
 	}
 
 	async function copyToClipboard(site: (typeof siteList)[number]) {
@@ -106,8 +114,17 @@
 									</div>
 									<div class="flex items-center justify-end space-x-2">
 										<DeletionButton on:delete={() => removeSite(site.index)} />
-										<Button on:click={() => editSite(site.index)} size="sm" variant="outline">
-											<Edit size={16} />
+										<Button
+											on:click={() => editSite(site.index)}
+											size="sm"
+											variant="outline"
+											disabled={editingIndex === site.index}
+										>
+											{#if editingIndex === site.index}
+												<Loader2 class="h-4 w-4 animate-spin" />
+											{:else}
+												<Edit size={16} />
+											{/if}
 										</Button>
 										<Button
 											on:click={() => copyToClipboard($sites[site.index])}