From d70eeff67195a6ca819f7a22d122f1f87cee6c2a Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Tue, 15 Apr 2025 18:30:42 +0200
Subject: [PATCH] Load monaco async with a placeholder to avoid size flash

---
 .../components/FakeMonacoPlaceHolder.svelte   | 24 +++++++++++++++++
 .../src/lib/components/SimpleEditor.svelte    | 26 ++++++++++++-------
 .../src/lib/components/TemplateEditor.svelte  | 21 ++++++++++-----
 3 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/lib/components/FakeMonacoPlaceHolder.svelte

diff --git a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
new file mode 100644
index 0000000000..a111fbaf7a
--- /dev/null
+++ b/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>
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index a7f390170c..a8ac8bdbe5 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/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' : ''}"
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index a38a5760fb..f5783bf3f0 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/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>