refac: styling

src/lib/components/documents/Settings/General.svelte

@@ -3,13 +3,20 @@
 	import { scanDocs } from '$lib/apis/rag';
 	import { documents } from '$lib/stores';
 	import { onMount } from 'svelte';
+	import toast from 'svelte-french-toast';
 
 	export let saveHandler: Function;
+
+	let loading = false;
+
 	const scanHandler = async () => {
+		loading = true;
 		const res = await scanDocs(localStorage.token);
+		loading = false;
 
 		if (res) {
 			await documents.set(await getDocs(localStorage.token));
+			toast.success('Scan complete!');
 		}
 	};
 
@@ -31,16 +38,19 @@
 				<div class=" self-center text-xs font-medium">Scan for documents from '/data/docs'</div>
 
 				<button
-					class=" self-center text-xs p-1 px-3 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded flex flex-row space-x-1 items-center"
+					class=" self-center text-xs p-1 px-3 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded flex flex-row space-x-1 items-center {loading
+						? ' cursor-not-allowed'
+						: ''}"
 					on:click={() => {
 						scanHandler();
 						console.log('check');
 					}}
 					type="button"
+					disabled={loading}
 				>
-					<div class="self-center">Scan</div>
+					<div class="self-center font-medium">Scan</div>
 
-					<svg
+					<!-- <svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 16 16"
 						fill="currentColor"
@@ -51,7 +61,35 @@
 							d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
 							clip-rule="evenodd"
 						/>
-					</svg>
+					</svg> -->
+
+					{#if loading}
+						<div class="ml-3 self-center">
+							<svg
+								class=" w-3 h-3"
+								viewBox="0 0 24 24"
+								fill="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								><style>
+									.spinner_ajPY {
+										transform-origin: center;
+										animation: spinner_AtaB 0.75s infinite linear;
+									}
+									@keyframes spinner_AtaB {
+										100% {
+											transform: rotate(360deg);
+										}
+									}
+								</style><path
+									d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+									opacity=".25"
+								/><path
+									d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+									class="spinner_ajPY"
+								/></svg
+							>
+						</div>
+					{/if}
 				</button>
 			</div>
 		</div>