lazy load editor on homepage

frontend/src/lib/components/ErrorOrRecoveryHandler.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Alert, Button, Tab, Tabs } from '$lib/components/common'
-	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import type { Schema, SupportedLanguage } from '$lib/common'
@@ -231,13 +230,17 @@
 	{/if}
 	{#if handlerPath}
 		<p class="font-semibold text-sm mt-4 mb-2">Extra arguments</p>
-		<SchemaForm
-			disabled={!isEditable}
-			schema={customHandlerSchema}
-			bind:args={handlerExtraArgs}
-			shouldHideNoInputs
-			class="text-xs"
-		/>
+		{#await import('$lib/components/SchemaForm.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				disabled={!isEditable}
+				schema={customHandlerSchema}
+				bind:args={handlerExtraArgs}
+				shouldHideNoInputs
+				class="text-xs"
+			/>
+		{/await}
 		{#if customHandlerSchema && customHandlerSchema.properties && Object.keys(customHandlerSchema.properties).length === 0}
 			<div class="text-xs texg-gray-700">This error handler takes no extra arguments</div>
 		{/if}
@@ -260,19 +263,23 @@
 		/>
 	</span>
 	{#if workspaceConnectedToSlack}
-		<SchemaForm
-			disabled={!$enterpriseLicense || !isSlackHandler(handlerPath)}
-			schema={slackHandlerSchema}
-			schemaSkippedValues={['slack']}
-			schemaFieldTooltip={{
-				channel: 'Slack channel name without the "#" - example: "windmill-alerts"'
-			}}
-			bind:args={handlerExtraArgs}
-			shouldHideNoInputs
-			class="text-xs"
-		/>
+		{#await import('$lib/components/SchemaForm.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				disabled={!$enterpriseLicense || !isSlackHandler(handlerPath)}
+				schema={slackHandlerSchema}
+				schemaSkippedValues={['slack']}
+				schemaFieldTooltip={{
+					channel: 'Slack channel name without the "#" - example: "windmill-alerts"'
+				}}
+				bind:args={handlerExtraArgs}
+				shouldHideNoInputs
+				class="text-xs"
+			/>
+		{/await}
 	{:else if workspaceConnectedToSlack == undefined}
-		<Loader2 class="animate-spin" />
+		<Loader2 class="animate-spin" size={10} />
 	{/if}
 	{#if $enterpriseLicense && isSlackHandler(handlerPath)}
 		{#if workspaceConnectedToSlack == false}

frontend/src/lib/components/ResourceEditorDrawer.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-	import ResourceEditor from './ResourceEditor.svelte'
 	import { Button, Drawer } from './common'
 
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 
-	import { Save } from 'lucide-svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 
 	let drawer: Drawer
 	let canSave = true
 	let resource_type: string | undefined = undefined
 
-	let resourceEditor: ResourceEditor | undefined = undefined
+	let resourceEditor: { editResource: () => void } | undefined = undefined
 
 	let path: string | undefined = undefined
 
@@ -32,14 +31,18 @@
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
-		<ResourceEditor
-			{newResource}
-			{path}
-			{resource_type}
-			on:refresh
-			bind:this={resourceEditor}
-			bind:canSave
-		/>
+		{#await import('./ResourceEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				{newResource}
+				{path}
+				{resource_type}
+				on:refresh
+				bind:this={resourceEditor}
+				bind:canSave
+			/>
+		{/await}
 		<svelte:fragment slot="actions">
 			<Button
 				startIcon={{ icon: Save }}

frontend/src/lib/components/apps/editor/DeploymentHistory.svelte

@@ -7,7 +7,7 @@
 	import { Skeleton } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { createEventDispatcher } from 'svelte'
-	import { Pencil, ArrowRight, X } from 'lucide-svelte'
+	import { Pencil, ArrowRight, X, Loader2 } from 'lucide-svelte'
 
 	export let appPath: string | undefined
 	let loading: boolean = false
@@ -179,7 +179,9 @@
 						</div>
 					</div>
 
-					{#await import('$lib/components/apps/editor/AppPreview.svelte') then Module}
+					{#await import('$lib/components/apps/editor/AppPreview.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
 						<Module.default noBackend app={selected.value} context={{}} />
 					{/await}
 				{:else}

frontend/src/lib/components/common/table/AppRow.svelte

@@ -23,14 +23,14 @@
 		Pen,
 		Share,
 		Trash,
-		Clipboard
+		Clipboard,
+		Loader2
 	} from 'lucide-svelte'
 	import { goto as gotoUrl } from '$app/navigation'
 	import { page } from '$app/stores'
 	import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import { DELETE, copyToClipboard } from '$lib/utils'
 	import AppDeploymentHistory from '$lib/components/apps/editor/AppDeploymentHistory.svelte'
-	import AppJsonEditor from '$lib/components/apps/editor/AppJsonEditor.svelte'
 	import { isDeployable } from '$lib/utils_deployable'
 	import { getDeployUiSettings } from '$lib/components/home/deploy_ui'
 
@@ -46,16 +46,20 @@
 
 	const dispatch = createEventDispatcher()
 
-	let appExport: AppJsonEditor
+	let appExport: { open: (path: string) => void } | undefined = undefined
 	let appDeploymentHistory: AppDeploymentHistory | undefined = undefined
 
 	async function loadAppJson() {
-		appExport.open(app.path)
+		appExport?.open(app.path)
 	}
 </script>
 
 {#if menuOpen}
-	<AppJsonEditor on:change bind:this={appExport} />
+	{#await import('$lib/components/apps/editor/AppJsonEditor.svelte')}
+		<Loader2 class="animate-spin" />
+	{:then Module}
+		<Module.default on:change bind:this={appExport} />
+	{/await}
 	<AppDeploymentHistory bind:this={appDeploymentHistory} appPath={app.path} />
 {/if}
 

frontend/src/lib/components/flows/CreateActionsApp.svelte

@@ -5,8 +5,7 @@
 	import { Button, FileInput } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
-	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
-	import { LayoutDashboard, Plus } from 'lucide-svelte'
+	import { LayoutDashboard, Loader2, Plus } from 'lucide-svelte'
 	import { importStore } from '../apps/store'
 	import { RawAppService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -85,12 +84,16 @@
 		title={'Import low-code app from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
 		on:close={() => drawer?.toggleDrawer?.()}
 	>
-		<SimpleEditor
-			bind:code={pendingRaw}
-			lang={importType}
-			class="h-full"
-			fixedOverflowWidgets={false}
-		/>
+		{#await import('$lib/components/SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:code={pendingRaw}
+				lang={importType}
+				class="h-full"
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
 		<svelte:fragment slot="actions">
 			<Button size="sm" on:click={importRaw}>Import</Button>
 		</svelte:fragment>

frontend/src/lib/components/flows/CreateActionsFlow.svelte

@@ -6,9 +6,8 @@
 	import { Button } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
-	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { importFlowStore } from '$lib/components/flows/flowStore'
-	import { Plus } from 'lucide-svelte'
+	import { Loader2, Plus } from 'lucide-svelte'
 	import YAML from 'yaml'
 
 	let drawer: Drawer | undefined = undefined
@@ -58,12 +57,16 @@
 		title={'Import flow from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
 		on:close={() => drawer?.toggleDrawer?.()}
 	>
-		<SimpleEditor
-			bind:code={pendingRaw}
-			lang={importType}
-			class="h-full"
-			fixedOverflowWidgets={false}
-		/>
+		{#await import('$lib/components/SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:code={pendingRaw}
+				lang={importType}
+				class="h-full"
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
 		<svelte:fragment slot="actions">
 			<Button size="sm" on:click={importRaw}>Import</Button>
 		</svelte:fragment>

frontend/src/lib/components/flows/FlowHistory.svelte

@@ -8,7 +8,7 @@
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import DrawerContent from '../common/drawer/DrawerContent.svelte'
 	import Button from '../common/button/Button.svelte'
-	import { ArrowRight, Pencil, X } from 'lucide-svelte'
+	import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
 	export let path: string
@@ -205,7 +205,9 @@
 										>Redeploy with that version
 									</Button>
 								</div>
-								{#await import('$lib/components/FlowViewer.svelte') then Module}
+								{#await import('$lib/components/FlowViewer.svelte')}
+									<Loader2 class="animate-spin" />
+								{:then Module}
 									<Module.default flow={selected} />
 								{/await}
 							</div>

frontend/src/lib/components/flows/content/FlowModuleScript.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { SupportedLanguage } from '$lib/common'
-	import DiffEditor from '$lib/components/DiffEditor.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
 	import { ScriptService } from '$lib/gen'
 	import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
 	import { workspaceStore } from '$lib/stores'
+	import { Loader2 } from 'lucide-svelte'
 
 	export let path: string
 	export let hash: string | undefined = undefined
@@ -68,15 +68,19 @@
 	{:else if showAllCode}
 		{#if showDiff}
 			{#key previousCode + code}
-				<DiffEditor
-					open={true}
-					class="h-screen"
-					readOnly
-					automaticLayout
-					defaultLang={scriptLangToEditorLang(language)}
-					defaultOriginal={previousCode}
-					defaultModified={code}
-				/>
+				{#await import('$lib/components/DiffEditor.svelte')}
+					<Loader2 class="animate-spin" />
+				{:then Module}
+					<Module.default
+						open={true}
+						class="h-screen"
+						readOnly
+						automaticLayout
+						defaultLang={scriptLangToEditorLang(language)}
+						defaultOriginal={previousCode}
+						defaultModified={code}
+					/>
+				{/await}
 			{/key}
 		{:else}
 			<HighlightCode {language} {code} />

frontend/src/routes/(root)/(logged)/+page.svelte

@@ -144,7 +144,9 @@
 		</svelte:fragment>
 
 		{#if flowViewerFlow?.flow}
-			{#await import('$lib/components/FlowViewer.svelte') then Module}
+			{#await import('$lib/components/FlowViewer.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
 				<Module.default flow={flowViewerFlow.flow} />
 			{/await}
 		{:else}
@@ -185,7 +187,9 @@
 
 		{#if appViewerApp?.app}
 			<div class="p-4">
-				{#await import('$lib/components/apps/editor/AppPreview.svelte') then Module}
+				{#await import('$lib/components/apps/editor/AppPreview.svelte')}
+					<Loader2 class="animate-spin" />
+				{:then Module}
 					<Module.default
 						app={appViewerApp?.app?.value}
 						appPath="''"