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 @@ } -
- +
+ + {#if loading} + + {/if} +
{#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 @@