From 53f615ca0bb31608942d23bbc79b8f555e1967eb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Mon, 30 Jun 2025 00:07:35 +0000
Subject: [PATCH] lazy load nits

---
 .../editor/component/ComponentInner.svelte    | 24 ++++++++++--------
 .../src/lib/components/resourceTypesStore.ts  | 25 +++++++++++++++++--
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
index 8d84d2e609..fb50dcfb4c 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
@@ -41,7 +41,6 @@
 	import PlotlyHtmlV2 from '../../components/display/PlotlyHtmlV2.svelte'
 	import AppScatterChart from '../../components/display/AppScatterChart.svelte'
 	import AppPieChart from '../../components/display/AppPieChart.svelte'
-	import AppTable from '../../components/display/table/AppTable.svelte'
 	import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
 	import AppText from '../../components/display/AppText.svelte'
 	import AppCodeInputComponent from '../../components/inputs/AppCodeInputComponent.svelte'
@@ -74,6 +73,7 @@
 	import AppUserResource from '../../components/inputs/AppUserResource.svelte'
 	import type { AppComponent } from './components'
 	import { Button } from '$lib/components/common'
+	import { Loader2 } from 'lucide-svelte'
 
 	interface Props {
 		component: AppComponent
@@ -235,15 +235,19 @@
 			{render}
 		/>
 	{:else if component.type === 'tablecomponent'}
-		<AppTable
-			configuration={component.configuration}
-			id={component.id}
-			customCss={component.customCss}
-			bind:initializing
-			componentInput={component.componentInput}
-			actionButtons={component.actionButtons}
-			{render}
-		/>
+		{#await import('$lib/components/apps/components/display/table/AppTable.svelte')}
+			<Loader2 />
+		{:then Module}
+			<Module.default
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				actionButtons={component.actionButtons}
+				{render}
+			/>
+		{/await}
 	{:else if component.type === 'dbexplorercomponent'}
 		<AppDbExplorer
 			configuration={component.configuration}
diff --git a/frontend/src/lib/components/resourceTypesStore.ts b/frontend/src/lib/components/resourceTypesStore.ts
index 2c2817d2f5..d3ba61d4be 100644
--- a/frontend/src/lib/components/resourceTypesStore.ts
+++ b/frontend/src/lib/components/resourceTypesStore.ts
@@ -4,19 +4,40 @@ import { get, writable } from "svelte/store";
 
 export const resourceTypesStore = writable<string[] | undefined>(undefined)
 
+let loading = false
+
 export async function getResourceTypes() {
     const rts = get(resourceTypesStore)
     if (rts) {
         return rts
     } else {
+        if (loading) {
+            let counter = 0
+            while (loading) {
+                await new Promise(resolve => setTimeout(resolve, 50))
+                counter++
+                if (counter > 10) {
+                    console.error('Resource types loading timeout')
+                    break
+                }
+            }
+            if (!loading) {
+                return get(resourceTypesStore)
+            }
+
+        }
+        loading = true
+
         let workspace = get(workspaceStore)
-        if (workspace){
+        if (workspace) {
             try {
                 const nrts = await ResourceService.listResourceTypeNames({ workspace: workspace })
                 resourceTypesStore.set(nrts)
+                loading = false
                 return nrts
             } catch (e) {
-                return ["error_fetching_names"]        
+                loading = false
+                return ["error_fetching_names"]
             }
         } else {
             return ['workspace_is_undefined']