only load async in flow editor

Author: diegoimbert

frontend/src/lib/components/InputTransformForm.svelte

@@ -515,6 +515,7 @@
 									on:change={() => {
 										dispatch('change', { argName, arg })
 									}}
+									loadAsync
 								/>
 							{/if}
 						</div>
@@ -583,6 +584,7 @@
 									focused = false
 								}}
 								autoHeight
+								loadAsync
 							/>
 						</div>
 						{#if !hideHelpButton}

frontend/src/lib/components/SimpleEditor.svelte

@@ -100,7 +100,8 @@
 		autofocus = false,
 		allowVim = false,
 		tailwindClasses = [],
-		class: className = ''
+		class: className = '',
+		loadAsync = false
 	} = $props<{
 		lang: string
 		code?: string
@@ -122,6 +123,7 @@
 		allowVim?: boolean
 		tailwindClasses?: string[]
 		class?: string
+		loadAsync?: boolean
 	}>()
 
 	const dispatch = createEventDispatcher()
@@ -510,16 +512,20 @@
 		}
 	}
 
-	onMount(() => {
-		setTimeout(async () => {
-			if (BROWSER) {
-				mounted = true
+	onMount(async () => {
+		if (BROWSER) {
+			if (loadAsync) {
+				setTimeout(async () => {
+					await loadMonaco()
+					mounted = true
+					if (autofocus) setTimeout(() => focus(), 0)
+				}, 0)
+			} else {
 				await loadMonaco()
-				if (autofocus) {
-					setTimeout(() => focus(), 0)
-				}
+				mounted = true
+				if (autofocus) setTimeout(() => focus(), 0)
 			}
-		}, 0)
+		}
 	})
 
 	$effect(() => {

frontend/src/lib/components/TemplateEditor.svelte

@@ -375,6 +375,7 @@
 	export let autoHeight = true
 	export let fixedOverflowWidgets = true
 	export let fontSize = 16
+	export let loadAsync = false
 
 	if (typeof code != 'string') {
 		code = ''
@@ -593,13 +594,18 @@
 	}
 
 	let mounted = false
-	onMount(() => {
-		setTimeout(async () => {
-			if (BROWSER) {
+	onMount(async () => {
+		if (BROWSER) {
+			if (loadAsync) {
+				setTimeout(async () => {
+					await loadMonaco()
+					mounted = true
+				}, 0)
+			} else {
 				await loadMonaco()
 				mounted = true
 			}
-		}, 0)
+		}
 	})
 
 	$: mounted && extraLib && initialized && loadExtraLib()