refac

src/lib/components/layout/FilesModal.svelte

@@ -28,7 +28,7 @@
 	let page = 0;
 	let allFilesLoaded = false;
 	let filesLoading = false;
-	let searchDebounceTimeout: any;
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let selectedFileId: string | null = null;
 	let showDeleteConfirmDialog = false;
@@ -61,31 +61,19 @@
 	const searchHandler = async () => {
 		if (!show) return;
 
-		if (searchDebounceTimeout) {
-			clearTimeout(searchDebounceTimeout);
-		}
-
 		page = 0;
 		files = null;
 		allFilesLoaded = false;
 
-		const doSearch = async () => {
+		try {
-			try {
+			const pattern = query ? `*${query}*` : '*';
-				const pattern = query ? `*${query}*` : '*';
+			const newFiles = await searchFiles(localStorage.token, pattern, 0, PAGE_SIZE);
-				const newFiles = await searchFiles(localStorage.token, pattern, 0, PAGE_SIZE);
+			files = sortFiles(newFiles);
-				files = sortFiles(newFiles);
+			allFilesLoaded = newFiles.length < PAGE_SIZE;
-				allFilesLoaded = newFiles.length < PAGE_SIZE;
+		} catch (error) {
-			} catch (error) {
+			// Handle 404 or other errors - show empty state instead of spinner
-				// Handle 404 or other errors - show empty state instead of spinner
+			files = [];
-				files = [];
+			allFilesLoaded = true;
-				allFilesLoaded = true;
-			}
-		};
-
-		if (query === '') {
-			await doSearch();
-		} else {
-			searchDebounceTimeout = setTimeout(doSearch, 500);
 		}
 	};
 
@@ -152,8 +140,12 @@
 		showFileItemModal = true;
 	};
 
-	$: if (show) {
+	// Debounce query changes
-		searchHandler();
+	$: if (show && query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			searchHandler();
+		}, 300);
 	}
 
 	onMount(() => {
@@ -178,11 +170,16 @@
 		window.addEventListener('blur', onBlur);
 
 		return () => {
+			clearTimeout(searchDebounceTimer);
 			window.removeEventListener('keydown', onKeyDown);
 			window.removeEventListener('keyup', onKeyUp);
 			window.removeEventListener('blur', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <ConfirmDialog
@@ -243,7 +240,6 @@
 					<input
 						class="w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 						bind:value={query}
-						on:input={() => searchHandler()}
 						placeholder={$i18n.t('Search Files')}
 						maxlength="500"
 					/>
@@ -254,7 +250,6 @@
 								class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 								on:click={() => {
 									query = '';
-									searchHandler();
 								}}
 							>
 								<XMark className="size-3" strokeWidth="2" />