From 64de6a17f508b40a776cc72c8b489586ebe17dd1 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sat, 4 Oct 2025 15:21:20 +0000
Subject: [PATCH] improve insert module button menu caching

---
 .../flows/content/FlowInputsQuick.svelte      | 87 ++++++++++++-------
 .../flows/map/InsertModuleInner.svelte        |  3 +-
 .../flows/pickers/PickHubScriptQuick.svelte   | 11 ++-
 .../pickers/WorkspaceScriptPickerQuick.svelte | 23 ++---
 4 files changed, 77 insertions(+), 47 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index 761035d3ab..d40d3a7fe5 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
@@ -1,14 +1,17 @@
+<script module lang="ts">
+	let cachedOwners: Record<string, string[]> = {}
+	let cachedIntegrations: string[] = []
+</script>
+
 <script lang="ts">
 	import { isCloudHosted } from '$lib/cloud'
 	import { sendUserToast } from '$lib/toast'
 	import FlowScriptPickerQuick from '../pickers/FlowScriptPickerQuick.svelte'
-	import WorkspaceScriptPickerQuick from '../pickers/WorkspaceScriptPickerQuick.svelte'
 	import { defaultScriptLanguages, processLangs } from '$lib/scripts'
-	import { defaultScripts, enterpriseLicense, userStore } from '$lib/stores'
+	import { defaultScripts, enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import type { SupportedLanguage } from '$lib/common'
 	import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte'
 	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
-	import PickHubScriptQuick from '../pickers/PickHubScriptQuick.svelte'
 	import { type Script, type ScriptLang, type HubScriptKind } from '$lib/gen'
 	import ListFiltersQuick from '$lib/components/home/ListFiltersQuick.svelte'
 	import { Folder, User } from 'lucide-svelte'
@@ -56,6 +59,9 @@
 		refreshCount = 0
 	}: Props = $props()
 
+	if ($workspaceStore && cachedOwners?.[$workspaceStore]) {
+		owners = cachedOwners[$workspaceStore]
+	}
 	type HubCompletion = {
 		path: string
 		summary: string
@@ -77,7 +83,7 @@
 	let selected: { kind: 'owner' | 'integrations'; name: string | undefined } | undefined =
 		$state(undefined)
 
-	let integrations: string[] = $state([])
+	let integrations: string[] = $state(cachedIntegrations)
 
 	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
 
@@ -444,41 +450,56 @@
 			{#if !selected && (preFilter !== 'workspace' || funcDesc?.length > 0)}
 				<div class="pt-2 pb-0 text-2xs font-light text-secondary ml-2">Workspace</div>
 			{/if}
-			<WorkspaceScriptPickerQuick
-				bind:owners
-				bind:ownerFilter={selected}
-				bind:filteredWithOwner={filteredWorkspaceItems}
-				{filter}
-				kind={selectedKind}
-				selected={selectedByKeyboard - inlineScripts?.length - aiLength - topLevelNodes.length}
-				on:pickScript
-				on:pickFlow
-				{displayPath}
-				{refreshCount}
-			/>
+			{#await import('../pickers/WorkspaceScriptPickerQuick.svelte') then Module}
+				<Module.default
+					bind:owners={
+						() => owners,
+						(v) => {
+							$workspaceStore && (cachedOwners[$workspaceStore] = v)
+							owners = v
+						}
+					}
+					bind:ownerFilter={selected}
+					bind:filteredWithOwner={filteredWorkspaceItems}
+					{filter}
+					kind={selectedKind}
+					selected={selectedByKeyboard - inlineScripts?.length - aiLength - topLevelNodes.length}
+					on:pickScript
+					on:pickFlow
+					{displayPath}
+					{refreshCount}
+				/>
+			{/await}
 		{/if}
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
 				{#if !selected && preFilter !== 'hub'}
 					<div class=" pb-0 text-2xs font-light text-secondary ml-2">Hub</div>
 				{/if}
-
-				<PickHubScriptQuick
-					bind:items={hubCompletions}
-					bind:filter
-					bind:apps={integrations}
-					appFilter={selected?.name}
-					kind={selectedKind}
-					selected={selectedByKeyboard -
-						inlineScripts?.length -
-						aiLength -
-						filteredWorkspaceItems?.length -
-						topLevelNodes.length}
-					on:pickScript
-					bind:loading
-					{displayPath}
-					{refreshCount}
-				/>
+				{#await import('../pickers/PickHubScriptQuick.svelte') then Module}
+					<Module.default
+						bind:items={hubCompletions}
+						bind:filter
+						bind:apps={
+							() => integrations,
+							(v) => {
+								cachedIntegrations = v
+								integrations = v
+							}
+						}
+						appFilter={selected?.name}
+						kind={selectedKind}
+						selected={selectedByKeyboard -
+							inlineScripts?.length -
+							aiLength -
+							filteredWorkspaceItems?.length -
+							topLevelNodes.length}
+						on:pickScript
+						bind:loading
+						{displayPath}
+						{refreshCount}
+					/>
+				{/await}
 			{/if}
 		{/if}
 	</Scrollable>
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
index 2f7fef584b..364af5c671 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
@@ -39,7 +39,7 @@
 
 	let width = $state(0)
 	let height = $state(0)
-
+	let owners = $state([])
 	let displayPath = $derived(width > 650 || height > 400)
 </script>
 
@@ -164,6 +164,7 @@
 			{disableAi}
 			{funcDesc}
 			{kind}
+			bind:owners
 			on:close={() => {
 				dispatch('close')
 			}}
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
index 879dbed29c..e618e13762 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
@@ -4,6 +4,7 @@
 			IntegrationService.listHubIntegrations({ kind }),
 		{ initial: { kind: 'script', refreshCount: 0 }, invalidateMs: 1000 * 60 }
 	)
+	console.log('listHubIntegrationsCached', listHubIntegrationsCached)
 	let listHubScriptsCached = createCache(
 		async ({
 			filter,
@@ -15,9 +16,11 @@
 			appFilter: string | undefined
 			refreshCount?: number
 		}) =>
-			filter.length > 0
-				? await ScriptService.queryHubScripts({ text: filter, limit: 40, kind })
-				: ((await ScriptService.getTopHubScripts({ limit: 40, kind, app: appFilter })).asks ?? []),
+			get(userStore)
+				? filter.length > 0
+					? await ScriptService.queryHubScripts({ text: filter, limit: 40, kind })
+					: ((await ScriptService.getTopHubScripts({ limit: 40, kind, app: appFilter })).asks ?? [])
+				: undefined,
 		{
 			initial: { filter: '', kind: 'script', appFilter: undefined, refreshCount: 0 },
 			invalidateMs: 1000 * 60
@@ -34,6 +37,8 @@
 	import { Circle } from 'lucide-svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { usePromise } from '$lib/svelte5Utils.svelte'
+	import { userStore } from '$lib/stores'
+	import { get } from 'svelte/store'
 
 	let hubNotAvailable = $state(false)
 
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
index 7141c0f816..c4df0772d3 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
@@ -11,7 +11,7 @@
 			isTemplate?: boolean
 			refreshCount?: number
 		}) =>
-			workspace
+			workspace && get(userStore)
 				? kind == 'flow'
 					? FlowService.listFlows({ workspace })
 					: ScriptService.listScripts({ workspace, kinds: kind, isTemplate })
@@ -42,6 +42,7 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import { usePromise } from '$lib/svelte5Utils.svelte'
 	import { get } from 'svelte/store'
+	import { userStore } from '$lib/stores'
 
 	type Item = {
 		path: string
@@ -114,17 +115,19 @@
 		}
 	})
 	$effect(() => {
-		owners = Array.from(
-			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-		).sort((a, b) => {
-			if (a.startsWith('u/') && !b.startsWith('u/')) return -1
-			if (b.startsWith('u/') && !a.startsWith('u/')) return 1
+		if (filteredItems) {
+			owners = Array.from(
+				new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+			).sort((a, b) => {
+				if (a.startsWith('u/') && !b.startsWith('u/')) return -1
+				if (b.startsWith('u/') && !a.startsWith('u/')) return 1
 
-			if (a.startsWith('f/') && !b.startsWith('f/')) return -1
-			if (b.startsWith('f/') && !a.startsWith('f/')) return 1
+				if (a.startsWith('f/') && !b.startsWith('f/')) return -1
+				if (b.startsWith('f/') && !a.startsWith('f/')) return 1
 
-			return a.localeCompare(b)
-		})
+				return a.localeCompare(b)
+			})
+		}
 	})
 	$effect(() => {
 		filteredWithOwner =