lazy load editor on homepage

frontend/src/lib/components/DiffDrawer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Alert, Button, Drawer, DrawerContent } from './common'
 	import { Loader2 } from 'lucide-svelte'
-	import DiffEditor from './DiffEditor.svelte'
 	import { scriptLangToEditorLang } from '$lib/scripts'
 	import Tabs from './common/tabs/Tabs.svelte'
 	import Tab from './common/tabs/Tab.svelte'
@@ -208,26 +207,34 @@
 						<div class="flex-1">
 							{#key diffType}
 								{#if contentType === 'content'}
-									<DiffEditor
-										open={true}
-										automaticLayout
-										class="h-full"
-										defaultLang={lang}
-										defaultModifiedLang={data.current.lang}
-										defaultOriginal={content}
-										defaultModified={data.current.content}
-										readOnly
-									/>
+									{#await import('$lib/components/DiffEditor.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											open={true}
+											automaticLayout
+											class="h-full"
+											defaultLang={lang}
+											defaultModifiedLang={data.current.lang}
+											defaultOriginal={content}
+											defaultModified={data.current.content}
+											readOnly
+										/>
+									{/await}
 								{:else if contentType === 'metadata'}
-									<DiffEditor
-										open={true}
-										automaticLayout
-										class="h-full"
-										defaultLang="yaml"
-										defaultOriginal={metadata}
-										defaultModified={data.current.metadata}
-										readOnly
-									/>
+									{#await import('$lib/components/DiffEditor.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											open={true}
+											automaticLayout
+											class="h-full"
+											defaultLang="yaml"
+											defaultOriginal={metadata}
+											defaultModified={data.current.metadata}
+											readOnly
+										/>
+									{/await}
 								{/if}
 							{/key}
 						</div>