createCache initial keys, no flicker at all

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>
 

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>
 

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)