From c43762d3aefa69b466a7954234396cb67fc0bc2b Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Fri, 20 Oct 2023 00:20:58 +0200
Subject: [PATCH] fix: hub scripts search (#2469)

---
 .../flows/pickers/PickHubScript.svelte        | 28 +++++++++++++++----
 .../lib/components/home/ListFilters.svelte    |  4 +--
 .../src/routes/(root)/(logged)/+page.svelte   |  2 +-
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index db4849e490..515436ee45 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -6,11 +6,14 @@
 	import { APP_TO_ICON_COMPONENT } from '$lib/components/icons'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import { IntegrationService, ScriptService } from '$lib/gen'
+	import { Loader2 } from 'lucide-svelte'
 
 	export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script'
 	export let filter = ''
 	export let syncQuery = false
 
+	let loading = false
+
 	const dispatch = createEventDispatcher()
 
 	let appFilter: string | undefined = undefined
@@ -38,20 +41,23 @@
 					kind: filterKind
 				})
 			).map((x) => x.name)
-			console.log('allApps', allApps)
 		} catch (err) {
 			sendUserToast(err.message, true)
 		}
 	}
 
-	let doneTs = 0
+	let startTs = 0
 	async function applyFilter(
 		filter: string,
 		filterKind: typeof kind,
 		appFilter: string | undefined
 	) {
 		try {
+			loading = true
 			const ts = Date.now()
+			startTs = ts
+			await new Promise((r) => setTimeout(r, 100))
+			if (ts < startTs) return
 			const scripts =
 				filter.length > 0
 					? await ScriptService.queryHubScripts({
@@ -67,8 +73,9 @@
 								kind: filterKind
 							})
 					  ).asks ?? []
-			if (ts < doneTs) return
-			doneTs = ts
+			if (ts === startTs) {
+				loading = false
+			}
 			const processed = scripts.map((x) => ({
 				...x,
 				path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
@@ -81,10 +88,19 @@
 	}
 </script>
 
-<!-- <SearchItems {filter} items={prefilteredItems} bind:filteredItems f={(x) => x.summary} /> -->
 <div class="w-full flex mt-1 items-center gap-2">
 	<slot />
-	<input type="text" placeholder="Search Hub Scripts" bind:value={filter} class="text-2xl grow" />
+	<div class="relative w-full">
+		<input
+			type="text"
+			placeholder="Search Hub Scripts"
+			bind:value={filter}
+			class="text-2xl grow !pr-9"
+		/>
+		{#if loading}
+			<Loader2 class="animate-spin text-gray-400 absolute right-2 top-2.5" />
+		{/if}
+	</div>
 </div>
 
 {#if items.length > 0 && apps.length > 0}
diff --git a/frontend/src/lib/components/home/ListFilters.svelte b/frontend/src/lib/components/home/ListFilters.svelte
index 9578b88582..b603c0247c 100644
--- a/frontend/src/lib/components/home/ListFilters.svelte
+++ b/frontend/src/lib/components/home/ListFilters.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import { Folder, User } from 'lucide-svelte'
-	import { flip } from 'svelte/animate'
-	import { fade } from 'svelte/transition'
 	import { Badge } from '../common'
 	import { APP_TO_ICON_COMPONENT } from '../icons'
 	import { onDestroy, onMount } from 'svelte'
@@ -65,7 +63,7 @@
 {#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
 	<div class={`gap-2 w-full flex flex-wrap ${bottomMargin ? 'my-4' : 'mt-4'}`}>
 		{#each filtersAndSelected as filter (filter)}
-			<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
+			<div>
 				<Badge
 					class={classNames(
 						'cursor-pointer inline-flex items-center gap-1 align-middle',
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index f4ba098bab..2b18954c36 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -31,7 +31,7 @@
 			? (window.location.hash?.replace('#', '') as Tab)
 			: 'workspace'
 
-	let subtab: 'flow' | 'script' | 'app' = 'app'
+	let subtab: 'flow' | 'script' | 'app' = 'script'
 
 	let filter: string = ''