From 497fa99335e2e2e8014b5e657f1da504fa994096 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 28 Aug 2024 10:05:07 +0200
Subject: [PATCH] lazy load editor on homepage

---
 frontend/src/lib/components/DiffDrawer.svelte | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/DiffDrawer.svelte b/frontend/src/lib/components/DiffDrawer.svelte
index 6c59a1aebc..7b461534c9 100644
--- a/frontend/src/lib/components/DiffDrawer.svelte
+++ b/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>