Fix flow editor slowness due to many instances of monaco

frontend/src/lib/components/Editor.svelte

@@ -175,6 +175,7 @@
 	import GlobalReviewButtons from './copilot/chat/GlobalReviewButtons.svelte'
 	import { writable } from 'svelte/store'
 	import { formatResourceTypes } from './copilot/chat/core'
+	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 	// import EditorTheme from './EditorTheme.svelte'
 
 	let divEl: HTMLDivElement | null = null
@@ -221,6 +222,7 @@
 	export let disabled: boolean = false
 	export let lineNumbersMinChars = 3
 	export let isAiPanelOpen: boolean = false
+	export let loadAsync = false
 
 	const rHash = randomHash()
 	$: filePath = computePath(path)
@@ -1374,9 +1376,14 @@
 		})
 	}
 
-	onMount(() => {
+	onMount(async () => {
 		if (BROWSER) {
-			loadMonaco().then((x) => (disposeMethod = x))
+			if (loadAsync) {
+				// setTimeout(() => loadMonaco().then((x) => (disposeMethod = x)), 0)
+			} else {
+				let m = await loadMonaco()
+				disposeMethod = m
+			}
 		}
 	})
 
@@ -1408,6 +1415,11 @@
 </script>
 
 <EditorTheme />
+{#if !editor}
+	<div class="inset-0 absolute overflow-clip">
+		<FakeMonacoPlaceHolder {code} />
+	</div>
+{/if}
 <div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}"></div>
 {#if $vimMode}
 	<div class="fixed bottom-0 z-30" bind:this={statusDiv}></div>

frontend/src/lib/components/FakeMonacoPlaceHolder.svelte

@@ -0,0 +1,112 @@
+<!-- Used to avoid height jitter when loading monaco asynchronously -->
+
+<script lang="ts">
+	import { getOS } from '$lib/utils'
+
+	type Props = {
+		code?: string
+		autoheight?: boolean
+		lineNumbersWidth?: number
+		lineNumbersOffset?: number
+		class?: string
+		fontSize?: number
+	}
+
+	let {
+		code,
+		autoheight = false,
+		lineNumbersWidth = 51,
+		lineNumbersOffset = 0,
+		class: className = '',
+		fontSize = 14
+	}: Props = $props()
+
+	// https://github.com/microsoft/vscode/blob/baa2dad3cdacd97ac02eff0604984faf1167ff1e/src/vs/editor/common/config/editorOptions.ts#L5421
+	const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace"
+	const DEFAULT_MAC_FONT_FAMILY = "Menlo, Monaco, 'Courier New', monospace"
+	const DEFAULT_LINUX_FONT_FAMILY = "'Droid Sans Mono', 'monospace', monospace"
+	const fontFamily =
+		getOS() === 'Windows'
+			? DEFAULT_WINDOWS_FONT_FAMILY
+			: getOS() === 'macOS'
+				? DEFAULT_MAC_FONT_FAMILY
+				: DEFAULT_LINUX_FONT_FAMILY
+
+	// https://github.com/microsoft/vscode/blob/baa2dad3cdacd97ac02eff0604984faf1167ff1e/src/vs/editor/common/config/fontInfo.ts#L14
+	const GOLDEN_LINE_HEIGHT_RATIO = getOS() == 'macOS' ? 1.5 : 1.35
+
+	let lines = $derived(code?.split('\n') ?? [])
+
+	const charWidth = 9 // try to match as closely as possible to monaco editor
+
+	const lineHeight = fontSize * GOLDEN_LINE_HEIGHT_RATIO
+
+	let [clientWidth, clientHeight] = $state([0, 0])
+	let showHorizontalScrollbar = $derived(
+		lines.some((line) => line.length * charWidth > clientWidth - 40)
+	)
+
+	let [editorWidth, editorHeight] = $derived([
+		clientWidth,
+		autoheight ? lines.length * lineHeight + (showHorizontalScrollbar ? 12 : 0) : clientHeight
+	])
+</script>
+
+<!-- Copy pasted from actual monaco editor in the web inspector -->
+
+<div
+	bind:clientWidth
+	bind:clientHeight
+	class="h-full w-full relative editor dark:bg-[#272D38] {className}"
+	style="--vscode-editorCodeLens-lineHeight: 18px; --vscode-editorCodeLens-fontSize: 12px; --vscode-editorCodeLens-fontFeatureSettings: 'liga' off, 'calt' off; --code-editorInlayHintsFontFamily: {fontFamily};"
+>
+	<div
+		class="monaco-editor no-user-select mac standalone showUnused showDeprecated vs-dark"
+		role="code"
+	>
+		<div class="overflow-guard" style="width: {editorWidth}px; height: {editorHeight}px;">
+			<div
+				class="margin"
+				role="presentation"
+				aria-hidden="true"
+				style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; width: {editorWidth}px; height: {editorHeight}px;"
+			>
+				<div
+					class="margin-view-overlays"
+					role="presentation"
+					aria-hidden="true"
+					style="position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: {lineNumbersWidth}px; height: 4893px;"
+				>
+					{#each lines as _, i}
+						<div style="top:{lineHeight * i}px;height:{lineHeight}px;">
+							<div class="line-numbers" style="left:{lineNumbersOffset}px;width:25px;">{i + 1}</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+			<div
+				class="monaco-scrollable-element editor-scrollable vs-dark mac"
+				style="position: absolute; overflow: hidden; left: {lineNumbersWidth}px; width: {editorWidth}px; height: {editorHeight}px"
+			>
+				<div
+					class="lines-content monaco-editor-background"
+					style="position: absolute; overflow: hidden; width: 1.67772e+07px; height: 1.67772e+07px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
+				>
+					<div
+						class="view-lines monaco-mouse-cursor-text text-tertiary/60"
+						style="line-height: {lineHeight}px; position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: 1143px; height: 789px;"
+					>
+						{#each lines as line, i}
+							<div
+								style="height: {lineHeight}px; top: {i * lineHeight}px;"
+								class="text-nowrap whitespace-pre"
+							>
+								{line}
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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/JsonEditor.svelte

@@ -9,6 +9,7 @@
 	export let error = ''
 	export let editor: SimpleEditor | undefined = undefined
 	export let small = false
+	export let loadAsync = false
 
 	$: tooBig = code && code?.length > 1000000
 
@@ -38,6 +39,7 @@
 	<div class="flex flex-col w-full">
 		<div class="border w-full">
 			<SimpleEditor
+				{loadAsync}
 				{small}
 				on:focus
 				on:blur

frontend/src/lib/components/ResourcePicker.svelte

@@ -135,7 +135,7 @@
 	}}
 />
 
-<div class="flex flex-col w-full items-start">
+<div class="flex flex-col w-full items-start min-h-9">
 	<div class="flex flex-row w-full items-center">
 		{#if collection?.length > 0}
 			<Select

frontend/src/lib/components/SimpleEditor.svelte

@@ -65,6 +65,7 @@
 	import { vimMode } from '$lib/stores'
 	import { initVim } from './monaco_keybindings'
 	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
+	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 	// import { createConfiguredEditor } from 'vscode/monaco'
 	// import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 
@@ -99,7 +100,8 @@
 		autofocus = false,
 		allowVim = false,
 		tailwindClasses = [],
-		class: className = ''
+		class: className = '',
+		loadAsync = false
 	} = $props<{
 		lang: string
 		code?: string
@@ -121,6 +123,7 @@
 		allowVim?: boolean
 		tailwindClasses?: string[]
 		class?: string
+		loadAsync?: boolean
 	}>()
 
 	const dispatch = createEventDispatcher()
@@ -279,6 +282,8 @@
 		}
 	})
 
+	let fontSize = $derived(small ? 12 : 14)
+
 	async function loadMonaco() {
 		await initializeVscode()
 		initialized = true
@@ -327,7 +332,7 @@
 			model,
 			lineDecorationsWidth: 6,
 			lineNumbersMinChars: 2,
-			fontSize: small ? 12 : 14,
+			fontSize: fontSize,
 			quickSuggestions: disableSuggestions
 				? { other: false, comments: false, strings: false }
 				: { other: true, comments: true, strings: true },
@@ -511,12 +516,16 @@
 
 	onMount(async () => {
 		if (BROWSER) {
-			mounted = true
-			await loadMonaco()
-			if (autofocus) {
-				setTimeout(() => {
-					focus()
+			if (loadAsync) {
+				setTimeout(async () => {
+					await loadMonaco()
+					mounted = true
+					if (autofocus) setTimeout(() => focus(), 0)
 				}, 0)
+			} else {
+				await loadMonaco()
+				mounted = true
+				if (autofocus) setTimeout(() => focus(), 0)
 			}
 		}
 	})
@@ -556,9 +565,22 @@
 		{suggestion}
 	</div>
 {/if}
+
+{#if !editor}
+	<FakeMonacoPlaceHolder
+		{code}
+		autoheight
+		lineNumbersWidth={(23 * fontSize) / 14}
+		lineNumbersOffset={fontSize == 14 ? -8 : -11}
+		{fontSize}
+	/>
+{/if}
+
 <div
 	bind:this={divEl}
-	class="relative {className} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	class="relative {className} {!editor ? 'hidden' : ''} editor simple-editor {!allowVim
+		? 'nonmain-editor'
+		: ''}"
 	bind:clientWidth={width}
 >
 	{#if placeholder}

frontend/src/lib/components/TemplateEditor.svelte

@@ -19,6 +19,7 @@
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
 	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
+	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 
 	export const conf = {
 		wordPattern:
@@ -374,6 +375,7 @@
 	export let autoHeight = true
 	export let fixedOverflowWidgets = true
 	export let fontSize = 16
+	export let loadAsync = false
 
 	if (typeof code != 'string') {
 		code = ''
@@ -594,8 +596,15 @@
 	let mounted = false
 	onMount(async () => {
 		if (BROWSER) {
-			await loadMonaco()
-			mounted = true
+			if (loadAsync) {
+				setTimeout(async () => {
+					await loadMonaco()
+					mounted = true
+				}, 0)
+			} else {
+				await loadMonaco()
+				mounted = true
+			}
 		}
 	})
 
@@ -626,10 +635,22 @@
 
 <EditorTheme />
 
+{#if !editor}
+	<FakeMonacoPlaceHolder
+		autoheight
+		{code}
+		lineNumbersWidth={23}
+		lineNumbersOffset={-8}
+		class="border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
+	/>
+{/if}
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class ?? ''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
+	class="{$$props.class ??
+		''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor
+		? 'hidden'
+		: ''}"
 	bind:clientWidth={width}
 ></div>
 

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -73,10 +73,11 @@
 			<Splitpanes horizontal class="h-full">
 				<Pane size={50}>
 					<SimpleEditor
+						loadAsync
 						class="h-full w-full"
 						bind:this={editor}
 						lang="javascript"
-						bind:code={componentInput.expr}
+						bind:code={() => componentInput.expr ?? '', (e) => (componentInput.expr = e)}
 						shouldBindKey={false}
 						fixedOverflowWidgets={false}
 						{extraLib}
@@ -105,10 +106,11 @@
 	<div class="border relative">
 		{#if !fullscreen}
 			<SimpleEditor
+				loadAsync
 				small
 				bind:this={editor}
 				lang="javascript"
-				bind:code={componentInput.expr}
+				bind:code={() => componentInput.expr ?? '', (e) => (componentInput.expr = e)}
 				shouldBindKey={false}
 				{extraLib}
 				autoHeight

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -235,6 +235,7 @@
 			{:else}
 				<div class="flex w-full flex-col">
 					<JsonEditor
+						loadAsync
 						small
 						bind:value={componentInput.value}
 						code={JSON.stringify(componentInput.value, null, 2)}

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

@@ -358,11 +358,12 @@
 
 				<div class="min-h-0 flex-grow" id="flow-editor-editor">
 					<Splitpanes horizontal>
-						<Pane bind:size={editorPanelSize} minSize={10}>
+						<Pane bind:size={editorPanelSize} minSize={10} class="relative">
 							{#if flowModule.value.type === 'rawscript'}
 								{#if !noEditor}
 									{#key flowModule.id}
 										<Editor
+											loadAsync
 											folding
 											path={$pathStore + '/' + flowModule.id}
 											bind:websocketAlive