Load monaco async with a placeholder to avoid size flash

frontend/src/lib/components/FakeMonacoPlaceHolder.svelte

@@ -0,0 +1,24 @@
+<!-- Used to avoid height jitter when loading monaco asynchronously -->
+
+<script lang="ts">
+	type Props = {
+		code: string
+		fontSize: number
+	}
+
+	let { code, fontSize }: Props = $props()
+</script>
+
+<div class="w-full pl-6 pr-14 z-9 leading-5 overflow-x-auto mycontainer">
+	<code
+		class="text-nowrap whitespace-pre-wrap text-ellipsis overflow-clip"
+		style="font-size: {fontSize}px;">{code}</code
+	>
+</div>
+
+<style>
+	.mycontainer::-webkit-scrollbar {
+		/* Try to match monaco's scrollbar */
+		height: 12px;
+	}
+</style>

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'
 
@@ -509,16 +510,18 @@
 		}
 	}
 
-	onMount(async () => {
-		if (BROWSER) {
-			mounted = true
-			await loadMonaco()
-			if (autofocus) {
-				setTimeout(() => {
-					focus()
-				}, 0)
+	onMount(() => {
+		setTimeout(async () => {
+			if (BROWSER) {
+				mounted = true
+				await loadMonaco()
+				if (autofocus) {
+					setTimeout(() => {
+						focus()
+					}, 0)
+				}
 			}
-		}
+		}, 0)
 	})
 
 	$effect(() => {
@@ -556,6 +559,11 @@
 		{suggestion}
 	</div>
 {/if}
+
+{#if !editor}
+	<FakeMonacoPlaceHolder {code} fontSize={small ? 12 : 14} />
+{/if}
+
 <div
 	bind:this={divEl}
 	class="relative {className} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"

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:
@@ -592,11 +593,13 @@
 	}
 
 	let mounted = false
-	onMount(async () => {
-		if (BROWSER) {
-			await loadMonaco()
-			mounted = true
-		}
+	onMount(() => {
+		setTimeout(async () => {
+			if (BROWSER) {
+				await loadMonaco()
+				mounted = true
+			}
+		}, 0)
 	})
 
 	$: mounted && extraLib && initialized && loadExtraLib()
@@ -626,10 +629,16 @@
 
 <EditorTheme />
 
+{#if !editor}
+	<FakeMonacoPlaceHolder {code} {fontSize} />
+{/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
+		? 'absolute'
+		: ''}"
 	bind:clientWidth={width}
 ></div>