save loading

Author: djinni-hppro

src/index.html

@@ -90,7 +90,7 @@
 
 	<!-- AppShellContent -->
 	<main class="flex-1 py-1 md:py-4 w-full"
-		:class="{ 'max-w-max mx-auto sm:px-6 lg:px-8': editingNoteId === null, 'overflow-y-hidden': settingsDialogIsOpen, 'overflow-y-auto': !settingsDialogIsOpen }"
+		:class="{ 'cursor-wait': isManualSyncing, 'max-w-max mx-auto sm:px-6 lg:px-8': editingNoteId === null, 'overflow-y-hidden': settingsDialogIsOpen, 'overflow-y-auto': !settingsDialogIsOpen }"
 	>
 		<!-- Search Box & Add Note -->
 		<template x-if="editingNoteId === null">
@@ -263,6 +263,7 @@ <h3 class="text-lg font-bold mb-4">Are you sure?</h3>
 	<!-- Settings Dialog -->
 	<div x-show="settingsDialogIsOpen"
 		 class="fixed inset-0 z-10 w-full h-full flex items-center justify-center overflow-x-hidden"
+		 :class="isSavingSettings ? 'cursor-wait' : 'cursor-pointer'"
 		 style="display: none;background-color: #0e0e0ee6;"
 	>
 		<div class="fixed inset-0 size-auto h-full md:h-auto max-h-full max-w-none md:m-10 p-6 rounded-lg overflow-x-hidden overflow-y-auto bg-white backdrop:bg-transparent"
@@ -461,15 +462,15 @@ <h3 class="text-lg font-bold">Settings <span class="text-sm pl-2 font-light text
 			<div class="flex justify-end gap-2 mt-2">
 				<button @click="openImport()" __disabled="!isSyncConfigured" class="cursor-pointer px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50">Import</button>
 				<button @click="handleExport()" __disabled="!isSyncConfigured" class="cursor-pointer px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50">Export</button>
-				<button @click="handleSync()" __disabled="isSyncButtonDisabled" class="cursor-pointer px-4 py-2 rounded-md bg-green-600 text-white hover:bg-green-700 flex items-center">
+				<button @click="handleSync()" __disabled="isSyncButtonDisabled" class="cursor-pointer px-4 py-2 rounded-md bg-green-600 text-white hover:bg-green-700 flex items-center" :class="isManualSyncing ? 'cursor-wait' : 'cursor-pointer'">
 					<svg x-show="isManualSyncing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
 					</svg>
 					<span>Sync</span>
 				</button>
-				<button @click="handleSave()" __disabled="!isSyncConfigured" class="cursor-pointer px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700">
-					<svg x-show="isManualSyncing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+				<button @click="handleSave()" class="cursor-pointer px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 flex items-center" :class="isSavingSettings ? 'cursor-wait' : 'cursor-pointer'">
+					<svg x-show="isSavingSettings" class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
 					</svg>
@@ -480,7 +481,7 @@ <h3 class="text-lg font-bold">Settings <span class="text-sm pl-2 font-light text
 	</div>
 
 	<!-- Toasts Container -->
-	<div class="fixed bottom-2 right-2 z-50 flex flex-col space-y-2">
+	<div class="fixed top-2 left-2 z-50 flex flex-col space-y-2">
 		<template x-for="toast in toasts" :key="toast.id">
 			<div
 				x-show="toast.show"