From 52109ab7e1d1132503473257978cc3eb3cb63e86 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 10 Sep 2025 14:20:19 +0200
Subject: [PATCH] createCache initial keys, no flicker at all

---
 .../flows/pickers/PickHubScriptQuick.svelte         |  8 +++++---
 .../flows/pickers/WorkspaceScriptPickerQuick.svelte | 13 +++++++++++--
 frontend/src/lib/utils.ts                           | 12 +++++++++---
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
index dc57ea2749..e9e2686840 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
-	let listHubIntegrationsCached = createCache((params: { kind: HubScriptKind & string }) =>
-		IntegrationService.listHubIntegrations(params)
+	let listHubIntegrationsCached = createCache(
+		(params: { kind: HubScriptKind & string }) => IntegrationService.listHubIntegrations(params),
+		{ initial: { kind: 'script' } }
 	)
 	let listHubScriptsCached = createCache(
 		async ({
@@ -14,7 +15,8 @@
 		}) =>
 			filter.length > 0
 				? await ScriptService.queryHubScripts({ text: filter, limit: 40, kind })
-				: ((await ScriptService.getTopHubScripts({ limit: 40, kind, app: appFilter })).asks ?? [])
+				: ((await ScriptService.getTopHubScripts({ limit: 40, kind, app: appFilter })).asks ?? []),
+		{ initial: { filter: '', kind: 'script', appFilter: undefined } }
 	)
 </script>
 
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
index e3d736232e..354ae3e5c0 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
@@ -1,9 +1,18 @@
 <script module lang="ts">
 	let loadItemsCached = createCache(
-		({ workspace, kind, isTemplate }: { workspace: string; kind: string; isTemplate?: boolean }) =>
+		({
+			workspace,
+			kind,
+			isTemplate
+		}: {
+			workspace: string
+			kind?: string
+			isTemplate?: boolean
+		}) =>
 			kind == 'flow'
 				? FlowService.listFlows({ workspace })
-				: ScriptService.listScripts({ workspace, kinds: kind, isTemplate })
+				: ScriptService.listScripts({ workspace, kinds: kind, isTemplate }),
+		{ initial: { workspace: 'data-pipeline-demo', kind: 'script' } }
 	)
 </script>
 
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 62e76f1c82..3b25abb4d4 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1553,15 +1553,21 @@ export function assert(msg: string, condition: boolean, value?: any) {
 	}
 }
 
-export function createCache<Keys extends Record<string, any>, T>(
+export function createCache<Keys extends Record<string, any>, T, InitialKeys extends Keys = Keys>(
 	compute: (keys: Keys) => T,
-	params?: { maxSize?: number }
+	params?: { maxSize?: number; initial?: InitialKeys }
 ): (keys: Keys) => T {
 	let cache = new Map<string, T>()
 	const maxSize = params?.maxSize ?? 15
 
+	if (params?.initial) {
+		let key = JSON.stringify(params.initial, Object.keys(params.initial).sort())
+		let value = compute(params.initial)
+		cache.set(key, value)
+	}
+
 	return (keys: Keys) => {
-		let key = JSON.stringify(keys)
+		let key = JSON.stringify(keys, Object.keys(keys).sort())
 		if (!cache.get(key)) {
 			let value = compute(keys)
 			cache.set(key, value)