[Assistants filter] Make UI more responsive (#906)

Author: Mishig

src/routes/assistants/+page.svelte

@@ -4,7 +4,6 @@
 	import { PUBLIC_APP_ASSETS, PUBLIC_ORIGIN } from "$env/static/public";
 	import { isHuggingChat } from "$lib/utils/isHuggingChat";
 
-	import { tick } from "svelte";
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
@@ -29,7 +28,8 @@
 
 	const SEARCH_DEBOUNCE_DELAY = 400;
 	let filterInputEl: HTMLInputElement;
-	let searchDisabled = false;
+	let filterValue = data.query;
+	let isFilterInPorgress = false;
 
 	const onModelChange = (e: Event) => {
 		const newUrl = getHref($page.url, {
@@ -39,19 +39,26 @@
 		goto(newUrl);
 	};
 
-	const filterOnName = debounce(async (e: Event) => {
-		searchDisabled = true;
-		const value = (e.target as HTMLInputElement).value;
+	const filterOnName = debounce(async (value: string) => {
+		filterValue = value;
+
+		if (isFilterInPorgress) {
+			return;
+		}
+
+		isFilterInPorgress = true;
 		const newUrl = getHref($page.url, {
 			newKeys: { q: value },
 			existingKeys: { behaviour: "delete", keys: ["p"] },
 		});
 		await goto(newUrl);
-		setTimeout(async () => {
-			searchDisabled = false;
-			await tick();
-			filterInputEl.focus();
-		}, 0);
+		setTimeout(() => filterInputEl.focus(), 0);
+		isFilterInPorgress = false;
+
+		// there was a new filter query before server returned response
+		if (filterValue !== value) {
+			filterOnName(filterValue);
+		}
 	}, SEARCH_DEBOUNCE_DELAY);
 
 	const settings = useSettingsStore();
@@ -171,12 +178,11 @@
 				<input
 					class="h-[30px] w-full bg-transparent pl-5 focus:outline-none"
 					placeholder="Filter by name"
-					value={data.query}
-					on:input={filterOnName}
+					value={filterValue}
+					on:input={(e) => filterOnName(e.currentTarget.value)}
 					bind:this={filterInputEl}
 					maxlength="150"
 					type="search"
-					disabled={searchDisabled}
 				/>
 			</div>
 		</div>