improve save preferences feedback

src/routes/profile/+page.svelte

@@ -9,9 +9,8 @@
 	let currency = 'USD';
 	let orderBy = 'total';
 	let savePreferenceDisabled = true;
-	let hasChanges = false;
-	let saveMessage = '';
 	let theme = 'light';
+	let isSaving = false;
 
 	$: authentication.subscribe((value) => {
 		isAuthenticated = !!value;
@@ -66,33 +65,31 @@
 
 	function updateCurrency(event) {
 		currency = event.target.value;
-		hasChanges = true;
 		savePreferenceDisabled = false;
 	}
 
 	function updateOrderBy(event) {
 		orderBy = event.target.value;
-		hasChanges = true;
 		savePreferenceDisabled = false;
 	}
 
 	function savePreferences() {
+		isSaving = true;
+
 		localStorage.setItem('defaultCurrency', currency);
 		localStorage.setItem('defaultOrder', orderBy);
 		localStorage.setItem('theme', theme);
 		applyTheme(theme);
 
 		savePreferenceDisabled = true;
-		saveMessage = 'Preferences saved successfully.';
 
 		setTimeout(() => {
-			saveMessage = '';
-		}, 2000);
+			isSaving = false;
+		}, 500);
 	}
 
 	function updateTheme(event) {
 		theme = event.target.value;
-		hasChanges = true;
 		savePreferenceDisabled = false;
 	}
 
@@ -161,12 +158,25 @@
 
 			<div class="flex flex-col sm:flex-row sm:justify-between gap-3 pt-4">
 				<button
-					class="bg-blue-500 hover:bg-blue-600 text-white px-5 py-2 rounded-lg transition"
+					class="bg-blue-500 hover:bg-blue-600 text-white px-5 py-2 rounded-lg transition flex items-center justify-center gap-2"
 					on:click={savePreferences}
-					disabled={savePreferenceDisabled}
+					disabled={savePreferenceDisabled || isSaving}
 				>
-					Save preferences
+					<div class="relative min-w-[160px] flex items-center justify-center gap-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class={`animate-spin h-5 w-5 text-white ${!isSaving ? 'hidden' : ''}`}
+						>
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+						</svg>
+						<span class={isSaving ? 'hidden' : ''}>Save preferences</span>
+						<span class={isSaving ? '' : 'hidden'}>Saving...</span>
+					</div>
 				</button>
+
 				<button
 					class="bg-red-500 hover:bg-red-600 text-white px-5 py-2 rounded-lg transition"
 					on:click={logout}
@@ -175,11 +185,5 @@
 				</button>
 			</div>
 		</div>
-
-		{#if saveMessage}
-			<div in:fade out:fade class="mt-4 text-center text-green-600 dark:text-green-400 font-medium">
-				{saveMessage}
-			</div>
-		{/if}
 	{/if}
 </div>