Fix Json Editor freezing on big input (#6142)

* Fix Json Editor freezing on big input

* fix root cause from FakeMonacoPlaceholder

* load too big anyway button

frontend/src/lib/components/FakeMonacoPlaceHolder.svelte

@@ -31,11 +31,12 @@
 			: getOS() === 'macOS'
 				? DEFAULT_MAC_FONT_FAMILY
 				: DEFAULT_LINUX_FONT_FAMILY
+	const CHAR_LIMIT = 5000
 
 	// 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') ?? [])
+	let lines = $derived(code?.substring(0, CHAR_LIMIT)?.split('\n') ?? [])
 
 	const charWidth = 9 // try to match as closely as possible to monaco editor
 

frontend/src/lib/components/JsonEditor.svelte

@@ -4,6 +4,7 @@
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import Button from './common/button/Button.svelte'
 
 	export let code: string | undefined
 	export let value: any = undefined
@@ -13,6 +14,7 @@
 	export let loadAsync = false
 
 	$: tooBig = code && code?.length > 1000000
+	let loadTooBigAnyway = false
 
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
@@ -34,8 +36,13 @@
 	$: code != undefined && parseJson()
 </script>
 
-{#if tooBig}
-	<span class="text-tertiary">JSON to edit is too big</span>
+{#if tooBig && !loadTooBigAnyway}
+	<div class="flex-1 text-sm">
+		JSON is too big
+		<Button size="xs2" variant="border" on:click={() => (loadTooBigAnyway = true)}>
+			Load anyway
+		</Button>
+	</div>
 {:else}
 	<div class="flex flex-col w-full">
 		<div class="border w-full">