refactor: load Debug component lazily

istudyatuni · Nov 10, 2023 · 90549b5 · 90549b5
1 parent c6ff673
commit 90549b5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -6,8 +6,8 @@
 	import { count } from 'src/api/visit-counter'
 
 	import Current from 'src/components/Current.svelte'
-	import Debug from 'src/components/Debug.svelte'
 	import Highlights from 'src/components/Highlights.svelte'
+	import Lazy from 'src/components/Lazy.svelte'
 	import Main from 'src/components/Main.svelte'
 	import Settings from 'src/components/Settings.svelte'
 
@@ -74,7 +74,9 @@
 			<Route>
 				<Route path="/"><Highlights /></Route>
 				<Route path="/settings"><Settings /></Route>
-				<Route path="/debug"><Debug /></Route>
+				<Route path="/debug">
+					<Lazy component={import('src/components/Debug.svelte')} />
+				</Route>
 			</Route>
 		</Main>
 	</main>

diff --git a/src/components/Lazy.svelte b/src/components/Lazy.svelte
@@ -0,0 +1,10 @@
+<!-- https://github.com/AlexxNB/tinro#lazy-loading-components -->
+<script>
+	export let component
+</script>
+
+{#await component.then ? component : component()}
+	Loading...
+{:then co}
+	<svelte:component this={co.default} />
+{/await}