From a92b29dae6950d29c2b8970e07d055fa02ff979e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Mon, 12 Oct 2026 19:07:23 +0200
Subject: [PATCH] fix: load the s3 explorer table lazily to keep monaco out of
 the app shell (#11701)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../lib/components/S3FilePickerInner.svelte   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/S3FilePickerInner.svelte b/frontend/src/lib/components/S3FilePickerInner.svelte
index 5f8dcfc3d7..89c23e84ae 100644
--- a/frontend/src/lib/components/S3FilePickerInner.svelte
+++ b/frontend/src/lib/components/S3FilePickerInner.svelte
@@ -26,7 +26,6 @@
 	import Toggle from './Toggle.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
-	import DBTable from './DBTable.svelte'
 	import type { IDbTableOps } from './dbOps'
 	import { resource } from 'runed'
 	import { staticDbTableOps } from './staticDbTableOps'
@@ -1160,6 +1159,12 @@
 	})
 </script>
 
+{#snippet tableLoading()}
+	<div class="flex items-center gap-2 p-3 text-xs text-tertiary">
+		<Loader2 size={14} class="animate-spin" /> Loading table...
+	</div>
+{/snippet}
+
 {#if workspaceSettingsInitialized === false}
 	<div class="p-4">
 		{#if fromWorkspaceSettings}
@@ -1522,17 +1527,20 @@
 			{#if showTable}
 				<div class="flex-1 min-h-0 relative">
 					{#if currentTable?.ops}
-						{#key currentTable.ops}
-							<DBTable dbTableOps={currentTable.ops} />
-						{/key}
+						<!-- Lazy: the (logged) layout mounts this picker and DBTable reaches monaco. -->
+						{#await import('./DBTable.svelte')}
+							{@render tableLoading()}
+						{:then DBTable}
+							{#key currentTable.ops}
+								<DBTable.default dbTableOps={currentTable.ops} />
+							{/key}
+						{/await}
 					{:else if tableOps.error}
 						<div class="p-3 text-xs text-red-600 dark:text-red-400 break-words">
 							Could not read this file as a table: {tableOps.error.message}
 						</div>
 					{:else}
-						<div class="flex items-center gap-2 p-3 text-xs text-tertiary">
-							<Loader2 size={14} class="animate-spin" /> Loading table...
-						</div>
+						{@render tableLoading()}
 					{/if}
 				</div>
 			{:else}