diff --git a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
index c54965d8be..2ada375bcf 100644
--- a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index eb7831cd4a..114e2f32f6 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/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 }}
diff --git a/frontend/src/lib/components/ScheduleEditorInner.svelte b/frontend/src/lib/components/ScheduleEditorInner.svelte
index 72577ac3a1..dfa6d979e4 100644
--- a/frontend/src/lib/components/ScheduleEditorInner.svelte
+++ b/frontend/src/lib/components/ScheduleEditorInner.svelte
@@ -5,7 +5,6 @@
 	import CronInput from '$lib/components/CronInput.svelte'
 	import Path from '$lib/components/Path.svelte'
 	import Required from '$lib/components/Required.svelte'
-	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import ErrorOrRecoveryHandler from '$lib/components/ErrorOrRecoveryHandler.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
@@ -64,85 +63,99 @@
 	let args: Record<string, any> = {}
 
 	let loading = false
+
+	let drawerLoading = true
 	export function openEdit(ePath: string, isFlow: boolean) {
-		is_flow = isFlow
-		initialPath = ePath
-		itemKind = is_flow ? 'flow' : 'script'
-		if (path == ePath) {
-			loadSchedule()
-		} else {
-			path = ePath
+		drawerLoading = true
+		try {
+			drawer?.openDrawer()
+			is_flow = isFlow
+			initialPath = ePath
+			itemKind = is_flow ? 'flow' : 'script'
+			if (path == ePath) {
+				loadSchedule()
+			} else {
+				path = ePath
+			}
+			edit = true
+		} finally {
+			drawerLoading = false
 		}
-		edit = true
-		drawer?.openDrawer()
 	}
 
 	export async function openNew(nis_flow: boolean, initial_script_path?: string) {
-		args = {}
-		runnable = undefined
-		is_flow = nis_flow
-		schedule = '0 0 12 * *'
-		paused_until = undefined
-		showPauseUntil = false
-		let defaultErrorHandlerMaybe = undefined
-		let defaultRecoveryHandlerMaybe = undefined
-		if ($workspaceStore) {
-			defaultErrorHandlerMaybe = (await SettingService.getGlobal({
-				key: 'default_error_handler_' + $workspaceStore!
-			})) as any
-			defaultRecoveryHandlerMaybe = (await SettingService.getGlobal({
-				key: 'default_recovery_handler_' + $workspaceStore!
-			})) as any
-		}
+		drawerLoading = true
+		try {
+			drawer?.openDrawer()
+			args = {}
+			runnable = undefined
+			is_flow = nis_flow
+			schedule = '0 0 12 * *'
+			paused_until = undefined
+			showPauseUntil = false
+			let defaultErrorHandlerMaybe = undefined
+			let defaultRecoveryHandlerMaybe = undefined
+			if ($workspaceStore) {
+				defaultErrorHandlerMaybe = (await SettingService.getGlobal({
+					key: 'default_error_handler_' + $workspaceStore!
+				})) as any
+				defaultRecoveryHandlerMaybe = (await SettingService.getGlobal({
+					key: 'default_recovery_handler_' + $workspaceStore!
+				})) as any
+			}
 
-		edit = false
-		itemKind = nis_flow ? 'flow' : 'script'
-		initialScriptPath = initial_script_path ?? ''
-		summary = ''
-		no_flow_overlap = false
-		path = initialScriptPath
-		initialPath = initialScriptPath
-		script_path = initialScriptPath
-		await loadScript(script_path)
+			edit = false
+			itemKind = nis_flow ? 'flow' : 'script'
+			initialScriptPath = initial_script_path ?? ''
+			summary = ''
+			no_flow_overlap = false
+			path = initialScriptPath
+			initialPath = initialScriptPath
+			script_path = initialScriptPath
+			await loadScript(script_path)
 
-		if (defaultErrorHandlerMaybe !== undefined && defaultErrorHandlerMaybe !== null) {
-			wsErrorHandlerMuted = defaultErrorHandlerMaybe['wsErrorHandlerMuted']
-			let splitted = (defaultErrorHandlerMaybe['errorHandlerPath'] as string).split('/')
-			errorHandleritemKind = splitted[0] as 'flow' | 'script'
-			errorHandlerPath = splitted.slice(1)?.join('/')
-			errorHandlerExtraArgs = defaultErrorHandlerMaybe['errorHandlerExtraArgs']
-			errorHandlerCustomInitialPath = errorHandlerPath
-			errorHandlerSelected = isSlackHandler('error', errorHandlerPath) ? 'slack' : 'custom'
-			failedTimes = defaultErrorHandlerMaybe['failedTimes']
-			failedExact = defaultErrorHandlerMaybe['failedExact']
-		} else {
-			wsErrorHandlerMuted = false
-			errorHandlerPath = undefined
-			errorHandleritemKind = 'script'
-			errorHandlerExtraArgs = {}
-			errorHandlerCustomInitialPath = undefined
-			errorHandlerSelected = 'slack'
-			failedTimes = 1
-			failedExact = false
+			if (defaultErrorHandlerMaybe !== undefined && defaultErrorHandlerMaybe !== null) {
+				wsErrorHandlerMuted = defaultErrorHandlerMaybe['wsErrorHandlerMuted']
+				let splitted = (defaultErrorHandlerMaybe['errorHandlerPath'] as string).split('/')
+				errorHandleritemKind = splitted[0] as 'flow' | 'script'
+				errorHandlerPath = splitted.slice(1)?.join('/')
+				errorHandlerExtraArgs = defaultErrorHandlerMaybe['errorHandlerExtraArgs']
+				errorHandlerCustomInitialPath = errorHandlerPath
+				errorHandlerSelected = isSlackHandler('error', errorHandlerPath) ? 'slack' : 'custom'
+				failedTimes = defaultErrorHandlerMaybe['failedTimes']
+				failedExact = defaultErrorHandlerMaybe['failedExact']
+			} else {
+				wsErrorHandlerMuted = false
+				errorHandlerPath = undefined
+				errorHandleritemKind = 'script'
+				errorHandlerExtraArgs = {}
+				errorHandlerCustomInitialPath = undefined
+				errorHandlerSelected = 'slack'
+				failedTimes = 1
+				failedExact = false
+			}
+			if (defaultRecoveryHandlerMaybe !== undefined && defaultRecoveryHandlerMaybe !== null) {
+				let splitted = (defaultRecoveryHandlerMaybe['recoveryHandlerPath'] as string).split('/')
+				recoveryHandlerItemKind = splitted[0] as 'flow' | 'script'
+				recoveryHandlerPath = splitted.slice(1)?.join('/')
+				recoveryHandlerExtraArgs = defaultRecoveryHandlerMaybe['recoveryHandlerExtraArgs']
+				recoveryHandlerCustomInitialPath = recoveryHandlerPath
+				recoveryHandlerSelected = isSlackHandler('recovery', recoveryHandlerPath)
+					? 'slack'
+					: 'custom'
+				recoveredTimes = defaultRecoveryHandlerMaybe['recoveredTimes']
+			} else {
+				recoveryHandlerPath = undefined
+				recoveryHandlerItemKind = 'script'
+				recoveryHandlerExtraArgs = {}
+				recoveryHandlerCustomInitialPath = undefined
+				recoveryHandlerSelected = 'slack'
+				recoveredTimes = 1
+			}
+			timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+		} finally {
+			drawerLoading = false
 		}
-		if (defaultRecoveryHandlerMaybe !== undefined && defaultRecoveryHandlerMaybe !== null) {
-			let splitted = (defaultRecoveryHandlerMaybe['recoveryHandlerPath'] as string).split('/')
-			recoveryHandlerItemKind = splitted[0] as 'flow' | 'script'
-			recoveryHandlerPath = splitted.slice(1)?.join('/')
-			recoveryHandlerExtraArgs = defaultRecoveryHandlerMaybe['recoveryHandlerExtraArgs']
-			recoveryHandlerCustomInitialPath = recoveryHandlerPath
-			recoveryHandlerSelected = isSlackHandler('recovery', recoveryHandlerPath) ? 'slack' : 'custom'
-			recoveredTimes = defaultRecoveryHandlerMaybe['recoveredTimes']
-		} else {
-			recoveryHandlerPath = undefined
-			recoveryHandlerItemKind = 'script'
-			recoveryHandlerExtraArgs = {}
-			recoveryHandlerCustomInitialPath = undefined
-			recoveryHandlerSelected = 'slack'
-			recoveredTimes = 1
-		}
-		timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-		drawer?.openDrawer()
 	}
 
 	async function resetRetries() {
@@ -411,428 +424,442 @@
 		on:close={drawer.closeDrawer}
 	>
 		<svelte:fragment slot="actions">
-			{#if edit}
-				<div class="mr-8">
-					<Button
-						size="sm"
-						variant="border"
-						startIcon={{ icon: List }}
-						disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
-						href={`${base}/runs/${script_path}?show_schedules=true&show_future_jobs=true`}
-					>
-						View runs
-					</Button>
-				</div>
-				<div class="mr-8 center-center -mt-1">
-					<Toggle
-						disabled={!can_write}
-						checked={enabled}
-						options={{ right: 'enable', left: 'disable' }}
-						on:change={async (e) => {
-							await ScheduleService.setScheduleEnabled({
-								path: initialPath,
-								workspace: $workspaceStore ?? '',
-								requestBody: { enabled: e.detail }
-							})
-							sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
-						}}
-					/>
-				</div>
-			{/if}
-			<Button
-				startIcon={{ icon: Save }}
-				disabled={!allowSchedule ||
-					pathError != '' ||
-					emptyString(script_path) ||
-					(errorHandlerSelected == 'slack' &&
-						!emptyString(errorHandlerPath) &&
-						emptyString(errorHandlerExtraArgs['channel']))}
-				on:click={scheduleScript}
-			>
-				{edit ? 'Save' : 'Schedule'}
-			</Button>
-		</svelte:fragment>
-
-		<div class="flex flex-col gap-12">
-			<div class="flex flex-col gap-4">
-				<div>
-					<h2 class="text-base font-semibold mb-2">Metadata</h2>
-					<Label label="Summary">
-						<!-- svelte-ignore a11y-autofocus -->
-						<input
-							autofocus
-							type="text"
-							placeholder="Short summary to be displayed when listed"
-							class="text-sm w-full"
-							bind:value={summary}
-							on:keyup={() => {
-								if (!edit && summary?.length > 0 && !dirtyPath) {
-									pathC?.setName(
-										summary
-											.toLowerCase()
-											.replace(/[^a-z0-9_]/g, '_')
-											.replace(/-+/g, '_')
-											.replace(/^-|-$/g, '')
-									)
-								}
+			{#if !drawerLoading}
+				{#if edit}
+					<div class="mr-8">
+						<Button
+							size="sm"
+							variant="border"
+							startIcon={{ icon: List }}
+							disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
+							href={`${base}/runs/${script_path}?show_schedules=true&show_future_jobs=true`}
+						>
+							View runs
+						</Button>
+					</div>
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await ScheduleService.setScheduleEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
 							}}
 						/>
-					</Label>
-				</div>
-				<Label label="Path">
-					{#if !edit}
-						<Path
-							bind:dirty={dirtyPath}
-							bind:this={pathC}
-							checkInitialPathExistence
-							bind:error={pathError}
-							bind:path
-							{initialPath}
-							namePlaceholder="schedule"
-							kind="schedule"
-						/>
-					{:else}
-						<div class="flex justify-start w-full">
-							<Badge
-								color="gray"
-								class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
-							>
-								Schedule path (not editable)
-							</Badge>
-							<input
-								type="text"
-								readonly
-								value={path}
-								size={path?.length || 50}
-								class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-								on:focus={({ currentTarget }) => {
-									currentTarget.select()
-								}}
-							/>
-							<!-- <span class="font-mono text-sm break-all">{path}</span> -->
-						</div>
-					{/if}
-				</Label>
-			</div>
-
-			<Section label="Schedule">
-				<svelte:fragment slot="header">
-					<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
-				</svelte:fragment>
-				<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
-				<Toggle
-					options={{
-						right: 'Pause schedule until...',
-						rightTooltip:
-							'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
-					}}
-					bind:checked={showPauseUntil}
-					size="xs"
-				/>
-				{#if showPauseUntil}
-					<DateTimeInput bind:value={paused_until} />
-				{/if}
-			</Section>
-			<Section label="Runnable">
-				{#if !edit}
-					<p class="text-xs mb-1 text-tertiary">
-						Pick a script or flow to be triggered by the schedule<Required required={true} />
-					</p>
-					<ScriptPicker
-						disabled={initialScriptPath != '' || !can_write}
-						initialPath={initialScriptPath}
-						kinds={['script']}
-						allowFlow={true}
-						bind:itemKind
-						bind:scriptPath={script_path}
-						on:select={(e) => {
-							loadScript(e.detail.path)
-						}}
-					/>
-				{:else}
-					<Alert type="info" title="Runnable path cannot be edited" collapsible>
-						Once a schedule is created, the runnable path cannot be changed. However, when renaming
-						a script or a flow, the runnable path will automatically update itself.
-					</Alert>
-					<div class="my-2" />
-					<ScriptPicker
-						disabled
-						initialPath={script_path}
-						scriptPath={script_path}
-						allowFlow={true}
-						{itemKind}
-					/>
-				{/if}
-				{#if itemKind == 'flow'}
-					<Toggle
-						options={{ right: 'no overlap of flows' }}
-						bind:checked={no_flow_overlap}
-						class="mt-2"
-					/>
-				{/if}
-				{#if itemKind == 'script'}
-					<div class="flex gap-2 items-center mt-2">
-						<Toggle options={{ right: 'no overlap' }} checked={true} disabled /><Tooltip
-							>Currently, overlapping scripts' executions is not supported. The next execution will
-							be scheduled only after the previous iteration has completed.</Tooltip
-						>
 					</div>
 				{/if}
-				<div class="mt-6">
-					{#if !loading}
-						{#if runnable}
-							{#if runnable?.schema && runnable.schema.properties && Object.keys(runnable.schema.properties).length > 0}
-								<SchemaForm
-									showReset
-									disabled={!can_write}
-									schema={runnable.schema}
-									bind:isValid
-									bind:args
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={!allowSchedule ||
+						pathError != '' ||
+						emptyString(script_path) ||
+						(errorHandlerSelected == 'slack' &&
+							!emptyString(errorHandlerPath) &&
+							emptyString(errorHandlerExtraArgs['channel']))}
+					on:click={scheduleScript}
+				>
+					{edit ? 'Save' : 'Schedule'}
+				</Button>
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="flex flex-col gap-12">
+				<div class="flex flex-col gap-4">
+					<div>
+						<h2 class="text-base font-semibold mb-2">Metadata</h2>
+						<Label label="Summary">
+							<!-- svelte-ignore a11y-autofocus -->
+							<input
+								autofocus
+								type="text"
+								placeholder="Short summary to be displayed when listed"
+								class="text-sm w-full"
+								bind:value={summary}
+								on:keyup={() => {
+									if (!edit && summary?.length > 0 && !dirtyPath) {
+										pathC?.setName(
+											summary
+												.toLowerCase()
+												.replace(/[^a-z0-9_]/g, '_')
+												.replace(/-+/g, '_')
+												.replace(/^-|-$/g, '')
+										)
+									}
+								}}
+							/>
+						</Label>
+					</div>
+					<Label label="Path">
+						{#if !edit}
+							<Path
+								bind:dirty={dirtyPath}
+								bind:this={pathC}
+								checkInitialPathExistence
+								bind:error={pathError}
+								bind:path
+								{initialPath}
+								namePlaceholder="schedule"
+								kind="schedule"
+							/>
+						{:else}
+							<div class="flex justify-start w-full">
+								<Badge
+									color="gray"
+									class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
+								>
+									Schedule path (not editable)
+								</Badge>
+								<input
+									type="text"
+									readonly
+									value={path}
+									size={path?.length || 50}
+									class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+									on:focus={({ currentTarget }) => {
+										currentTarget.select()
+									}}
 								/>
+								<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+							</div>
+						{/if}
+					</Label>
+				</div>
+
+				<Section label="Schedule">
+					<svelte:fragment slot="header">
+						<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
+					</svelte:fragment>
+					<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
+					<Toggle
+						options={{
+							right: 'Pause schedule until...',
+							rightTooltip:
+								'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
+						}}
+						bind:checked={showPauseUntil}
+						size="xs"
+					/>
+					{#if showPauseUntil}
+						<DateTimeInput bind:value={paused_until} />
+					{/if}
+				</Section>
+				<Section label="Runnable">
+					{#if !edit}
+						<p class="text-xs mb-1 text-tertiary">
+							Pick a script or flow to be triggered by the schedule<Required required={true} />
+						</p>
+						<ScriptPicker
+							disabled={initialScriptPath != '' || !can_write}
+							initialPath={initialScriptPath}
+							kinds={['script']}
+							allowFlow={true}
+							bind:itemKind
+							bind:scriptPath={script_path}
+							on:select={(e) => {
+								loadScript(e.detail.path)
+							}}
+						/>
+					{:else}
+						<Alert type="info" title="Runnable path cannot be edited" collapsible>
+							Once a schedule is created, the runnable path cannot be changed. However, when
+							renaming a script or a flow, the runnable path will automatically update itself.
+						</Alert>
+						<div class="my-2" />
+						<ScriptPicker
+							disabled
+							initialPath={script_path}
+							scriptPath={script_path}
+							allowFlow={true}
+							{itemKind}
+						/>
+					{/if}
+					{#if itemKind == 'flow'}
+						<Toggle
+							options={{ right: 'no overlap of flows' }}
+							bind:checked={no_flow_overlap}
+							class="mt-2"
+						/>
+					{/if}
+					{#if itemKind == 'script'}
+						<div class="flex gap-2 items-center mt-2">
+							<Toggle options={{ right: 'no overlap' }} checked={true} disabled /><Tooltip
+								>Currently, overlapping scripts' executions is not supported. The next execution
+								will be scheduled only after the previous iteration has completed.</Tooltip
+							>
+						</div>
+					{/if}
+					<div class="mt-6">
+						{#if !loading}
+							{#if runnable}
+								{#if runnable?.schema && runnable.schema.properties && Object.keys(runnable.schema.properties).length > 0}
+									{#await import('$lib/components/SchemaForm.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											showReset
+											disabled={!can_write}
+											schema={runnable.schema}
+											bind:isValid
+											bind:args
+										/>
+									{/await}
+								{:else}
+									<div class="text-xs texg-gray-700">
+										This {is_flow ? 'flow' : 'script'} takes no argument
+									</div>
+								{/if}
 							{:else}
-								<div class="text-xs texg-gray-700">
-									This {is_flow ? 'flow' : 'script'} takes no argument
+								<div class="text-xs texg-gray-700 my-2">
+									Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
 								</div>
 							{/if}
 						{:else}
-							<div class="text-xs texg-gray-700 my-2">
-								Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
-							</div>
+							<Loader2 class="animate-spin" />
+						{/if}
+					</div>
+				</Section>
+
+				<div class="flex flex-col gap-2">
+					{#if !loading}
+						<Tabs bind:selected={optionTabSelected}>
+							<Tab value="error_handler">Error Handler</Tab>
+							<Tab value="recovery_handler">Recovery Handler</Tab>
+							{#if itemKind === 'script'}
+								<Tab value="retries">Retries</Tab>
+								<Tab value="tag">Custom tag</Tab>
+							{/if}
+						</Tabs>
+						<div class="pt-0.5" />
+						{#if optionTabSelected === 'error_handler'}
+							<Section label="Error handler">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+								</svelte:fragment>
+								<svelte:fragment slot="action">
+									<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
+										defaults
+										<Dropdown
+											items={[
+												{
+													displayName: `Override future schedules only`,
+													action: () => saveAsDefaultErrorHandler(false)
+												},
+												{
+													displayName: 'Override all existing',
+													type: 'delete',
+													action: () => saveAsDefaultErrorHandler(true)
+												}
+											]}
+										>
+											<svelte:fragment>
+												<Save size={12} class="mr-1" />
+												Set as default
+											</svelte:fragment>
+										</Dropdown>
+									</div>
+								</svelte:fragment>
+								<div class="flex flex-row py-2">
+									<Toggle
+										size="xs"
+										disabled={!can_write || !$enterpriseLicense}
+										bind:checked={wsErrorHandlerMuted}
+										options={{ right: 'Mute workspace error handler for this schedule' }}
+									/>
+								</div>
+
+								<ErrorOrRecoveryHandler
+									isEditable={can_write}
+									errorOrRecovery="error"
+									showScriptHelpText={true}
+									bind:handlerSelected={errorHandlerSelected}
+									bind:handlerPath={errorHandlerPath}
+									customInitialScriptPath={errorHandlerCustomInitialPath}
+									slackToggleText="Alert channel on error"
+									customScriptTemplate="/scripts/add?hub=hub%2F2420%2Fwindmill%2Fschedule_error_handler_template"
+									bind:customHandlerKind={errorHandleritemKind}
+									bind:handlerExtraArgs={errorHandlerExtraArgs}
+								>
+									<svelte:fragment slot="custom-tab-tooltip">
+										<Tooltip>
+											<div class="flex gap-20 items-start mt-3">
+												<div class="text-sm"
+													>The following args will be passed to the error handler:
+													<ul class="mt-1 ml-2">
+														<li><b>path</b>: The path of the script or flow that failed.</li>
+														<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+														<li><b>schedule_path</b>: The path of the schedule.</li>
+														<li><b>error</b>: The error details.</li>
+														<li
+															><b>failed_times</b>: Minimum number of times the schedule failed
+															before calling the error handler.</li
+														>
+														<li
+															><b>started_at</b>: The start datetime of the latest job that failed.</li
+														>
+													</ul>
+												</div>
+											</div>
+										</Tooltip>
+									</svelte:fragment>
+								</ErrorOrRecoveryHandler>
+								<div class="flex flex-row items-center justify-between">
+									<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
+										<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
+											Triggered when schedule failed</p
+										>
+										<select
+											class="!w-14"
+											bind:value={failedExact}
+											disabled={!$enterpriseLicense || emptyString(errorHandlerPath)}
+										>
+											<option value={false}>&gt;=</option>
+											<option value={true}>==</option>
+										</select>
+										<input
+											type="number"
+											class="!w-14 text-center {emptyString(errorHandlerPath)
+												? 'text-tertiary'
+												: ''}"
+											bind:value={failedTimes}
+											disabled={!$enterpriseLicense}
+											min="1"
+										/>
+										<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
+											>time{failedTimes > 1 ? 's in a row' : ''}</p
+										>
+									</div>
+								</div>
+							</Section>
+						{:else if optionTabSelected === 'recovery_handler'}
+							<Section label="Recovery handler">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+								</svelte:fragment>
+								<svelte:fragment slot="action">
+									<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
+										defaults
+										<Dropdown
+											items={[
+												{
+													displayName: `Override future schedules only`,
+													action: () => saveAsDefaultRecoveryHandler(false)
+												},
+												{
+													displayName: 'Override all existing',
+													type: 'delete',
+													action: () => saveAsDefaultRecoveryHandler(true)
+												}
+											]}
+										>
+											<svelte:fragment>
+												<Save size={12} class="mr-1" />
+												Set as default
+											</svelte:fragment>
+										</Dropdown>
+									</div>
+								</svelte:fragment>
+								<ErrorOrRecoveryHandler
+									isEditable={can_write && !emptyString($enterpriseLicense)}
+									errorOrRecovery="recovery"
+									bind:handlerSelected={recoveryHandlerSelected}
+									bind:handlerPath={recoveryHandlerPath}
+									customInitialScriptPath={recoveryHandlerCustomInitialPath}
+									slackToggleText="Alert channel when error recovered"
+									customScriptTemplate="/scripts/add?hub=hub%2F2421%2Fwindmill%2Fschedule_recovery_handler_template"
+									bind:customHandlerKind={recoveryHandlerItemKind}
+									bind:handlerExtraArgs={recoveryHandlerExtraArgs}
+								>
+									<svelte:fragment slot="custom-tab-tooltip">
+										<Tooltip>
+											<div class="flex gap-20 items-start mt-3">
+												<div class=" text-sm"
+													>The following args will be passed to the recovery handler:
+													<ul class="mt-1 ml-2">
+														<li><b>path</b>: The path of the script or flow that recovered.</li>
+														<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+														<li><b>schedule_path</b>: The path of the schedule.</li>
+														<li><b>error</b>: The error of the last job that errored</li>
+														<li
+															><b>error_started_at</b>: The start datetime of the last job that
+															errored</li
+														>
+														<li
+															><b>success_times</b>: The number of times the schedule succeeded
+															before calling the recovery handler.</li
+														>
+														<li><b>success_result</b>: The result of the latest successful job</li>
+														<li
+															><b>success_started_at</b>: The start datetime of the latest
+															successful job</li
+														>
+													</ul>
+												</div>
+											</div>
+										</Tooltip>
+									</svelte:fragment>
+								</ErrorOrRecoveryHandler>
+								<div class="flex flex-row items-center justify-between">
+									<div
+										class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
+											recoveryHandlerPath
+										)
+											? 'text-tertiary'
+											: ''}"
+									>
+										<p>Triggered when schedule recovered</p>
+										<input
+											type="number"
+											class="!w-14 mx-2 text-center"
+											bind:value={recoveredTimes}
+											min="1"
+										/>
+										<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
+									</div>
+								</div>
+							</Section>
+						{:else if optionTabSelected === 'retries'}
+							<Section label="Retries">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+									<Tooltip>
+										If defined, upon error this schedule will be retried with a delay and a maximum
+										number of attempts as defined below.
+										<br />
+										This is only available for individual script. For flows, retries can be set on each
+										flow step in the flow editor.
+									</Tooltip>
+								</svelte:fragment>
+								<FlowRetries bind:flowModuleRetry={retry} disabled={itemKind !== 'script'} />
+							</Section>
+						{:else if optionTabSelected === 'tag'}
+							<Section
+								label="Custom script tag"
+								tooltip="When set, the script tag will be overridden by this tag"
+							>
+								<WorkerTagPicker bind:tag popupPlacement="top-end" />
+							</Section>
 						{/if}
 					{:else}
 						<Loader2 class="animate-spin" />
 					{/if}
 				</div>
-			</Section>
-
-			<div class="flex flex-col gap-2">
-				{#if !loading}
-					<Tabs bind:selected={optionTabSelected}>
-						<Tab value="error_handler">Error Handler</Tab>
-						<Tab value="recovery_handler">Recovery Handler</Tab>
-						{#if itemKind === 'script'}
-							<Tab value="retries">Retries</Tab>
-							<Tab value="tag">Custom tag</Tab>
-						{/if}
-					</Tabs>
-					<div class="pt-0.5" />
-					{#if optionTabSelected === 'error_handler'}
-						<Section label="Error handler">
-							<svelte:fragment slot="header">
-								<div class="flex flex-row gap-2">
-									{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-								</div>
-							</svelte:fragment>
-							<svelte:fragment slot="action">
-								<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
-									defaults
-									<Dropdown
-										items={[
-											{
-												displayName: `Override future schedules only`,
-												action: () => saveAsDefaultErrorHandler(false)
-											},
-											{
-												displayName: 'Override all existing',
-												type: 'delete',
-												action: () => saveAsDefaultErrorHandler(true)
-											}
-										]}
-									>
-										<svelte:fragment>
-											<Save size={12} class="mr-1" />
-											Set as default
-										</svelte:fragment>
-									</Dropdown>
-								</div>
-							</svelte:fragment>
-							<div class="flex flex-row py-2">
-								<Toggle
-									size="xs"
-									disabled={!can_write || !$enterpriseLicense}
-									bind:checked={wsErrorHandlerMuted}
-									options={{ right: 'Mute workspace error handler for this schedule' }}
-								/>
-							</div>
-
-							<ErrorOrRecoveryHandler
-								isEditable={can_write}
-								errorOrRecovery="error"
-								showScriptHelpText={true}
-								bind:handlerSelected={errorHandlerSelected}
-								bind:handlerPath={errorHandlerPath}
-								customInitialScriptPath={errorHandlerCustomInitialPath}
-								slackToggleText="Alert channel on error"
-								customScriptTemplate="/scripts/add?hub=hub%2F2420%2Fwindmill%2Fschedule_error_handler_template"
-								bind:customHandlerKind={errorHandleritemKind}
-								bind:handlerExtraArgs={errorHandlerExtraArgs}
-							>
-								<svelte:fragment slot="custom-tab-tooltip">
-									<Tooltip>
-										<div class="flex gap-20 items-start mt-3">
-											<div class="text-sm"
-												>The following args will be passed to the error handler:
-												<ul class="mt-1 ml-2">
-													<li><b>path</b>: The path of the script or flow that failed.</li>
-													<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-													<li><b>schedule_path</b>: The path of the schedule.</li>
-													<li><b>error</b>: The error details.</li>
-													<li
-														><b>failed_times</b>: Minimum number of times the schedule failed before
-														calling the error handler.</li
-													>
-													<li
-														><b>started_at</b>: The start datetime of the latest job that failed.</li
-													>
-												</ul>
-											</div>
-										</div>
-									</Tooltip>
-								</svelte:fragment>
-							</ErrorOrRecoveryHandler>
-							<div class="flex flex-row items-center justify-between">
-								<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
-									<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
-										Triggered when schedule failed</p
-									>
-									<select
-										class="!w-14"
-										bind:value={failedExact}
-										disabled={!$enterpriseLicense || emptyString(errorHandlerPath)}
-									>
-										<option value={false}>&gt;=</option>
-										<option value={true}>==</option>
-									</select>
-									<input
-										type="number"
-										class="!w-14 text-center {emptyString(errorHandlerPath) ? 'text-tertiary' : ''}"
-										bind:value={failedTimes}
-										disabled={!$enterpriseLicense}
-										min="1"
-									/>
-									<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
-										>time{failedTimes > 1 ? 's in a row' : ''}</p
-									>
-								</div>
-							</div>
-						</Section>
-					{:else if optionTabSelected === 'recovery_handler'}
-						<Section label="Recovery handler">
-							<svelte:fragment slot="header">
-								<div class="flex flex-row gap-2">
-									{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-								</div>
-							</svelte:fragment>
-							<svelte:fragment slot="action">
-								<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
-									defaults
-									<Dropdown
-										items={[
-											{
-												displayName: `Override future schedules only`,
-												action: () => saveAsDefaultRecoveryHandler(false)
-											},
-											{
-												displayName: 'Override all existing',
-												type: 'delete',
-												action: () => saveAsDefaultRecoveryHandler(true)
-											}
-										]}
-									>
-										<svelte:fragment>
-											<Save size={12} class="mr-1" />
-											Set as default
-										</svelte:fragment>
-									</Dropdown>
-								</div>
-							</svelte:fragment>
-							<ErrorOrRecoveryHandler
-								isEditable={can_write && !emptyString($enterpriseLicense)}
-								errorOrRecovery="recovery"
-								bind:handlerSelected={recoveryHandlerSelected}
-								bind:handlerPath={recoveryHandlerPath}
-								customInitialScriptPath={recoveryHandlerCustomInitialPath}
-								slackToggleText="Alert channel when error recovered"
-								customScriptTemplate="/scripts/add?hub=hub%2F2421%2Fwindmill%2Fschedule_recovery_handler_template"
-								bind:customHandlerKind={recoveryHandlerItemKind}
-								bind:handlerExtraArgs={recoveryHandlerExtraArgs}
-							>
-								<svelte:fragment slot="custom-tab-tooltip">
-									<Tooltip>
-										<div class="flex gap-20 items-start mt-3">
-											<div class=" text-sm"
-												>The following args will be passed to the recovery handler:
-												<ul class="mt-1 ml-2">
-													<li><b>path</b>: The path of the script or flow that recovered.</li>
-													<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-													<li><b>schedule_path</b>: The path of the schedule.</li>
-													<li><b>error</b>: The error of the last job that errored</li>
-													<li
-														><b>error_started_at</b>: The start datetime of the last job that
-														errored</li
-													>
-													<li
-														><b>success_times</b>: The number of times the schedule succeeded before
-														calling the recovery handler.</li
-													>
-													<li><b>success_result</b>: The result of the latest successful job</li>
-													<li
-														><b>success_started_at</b>: The start datetime of the latest successful
-														job</li
-													>
-												</ul>
-											</div>
-										</div>
-									</Tooltip>
-								</svelte:fragment>
-							</ErrorOrRecoveryHandler>
-							<div class="flex flex-row items-center justify-between">
-								<div
-									class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
-										recoveryHandlerPath
-									)
-										? 'text-tertiary'
-										: ''}"
-								>
-									<p>Triggered when schedule recovered</p>
-									<input
-										type="number"
-										class="!w-14 mx-2 text-center"
-										bind:value={recoveredTimes}
-										min="1"
-									/>
-									<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
-								</div>
-							</div>
-						</Section>
-					{:else if optionTabSelected === 'retries'}
-						<Section label="Retries">
-							<svelte:fragment slot="header">
-								<div class="flex flex-row gap-2">
-									{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-								</div>
-								<Tooltip>
-									If defined, upon error this schedule will be retried with a delay and a maximum
-									number of attempts as defined below.
-									<br />
-									This is only available for individual script. For flows, retries can be set on each
-									flow step in the flow editor.
-								</Tooltip>
-							</svelte:fragment>
-							<FlowRetries bind:flowModuleRetry={retry} disabled={itemKind !== 'script'} />
-						</Section>
-					{:else if optionTabSelected === 'tag'}
-						<Section
-							label="Custom script tag"
-							tooltip="When set, the script tag will be overridden by this tag"
-						>
-							<WorkerTagPicker bind:tag popupPlacement="top-end" />
-						</Section>
-					{/if}
-				{:else}
-					<Loader2 class="animate-spin" />
-				{/if}
 			</div>
-		</div>
+		{/if}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
index 784ffa7fb6..785811105f 100644
--- a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index b2a8cd5a10..9d1518d230 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/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}
 
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index a6175a72a3..f0c08acf3b 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
index 52ef9e8aa7..2ce77b047f 100644
--- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/flows/FlowHistory.svelte b/frontend/src/lib/components/flows/FlowHistory.svelte
index 5f293a8854..e98d3a2778 100644
--- a/frontend/src/lib/components/flows/FlowHistory.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
index 1d1044f99d..452b8f3ae2 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
+++ b/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} />
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index e2913b5e79..5fb0dd43b8 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/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="''"