From 9ed2ef27bee7992b9ddc317ae43393e8dda7e7e0 Mon Sep 17 00:00:00 2001
From: Max <jim-x@web.de>
Date: Mon, 20 Nov 2023 14:12:53 +0100
Subject: [PATCH] feat: lazy load gallery

---
 pnpm-lock.yaml                       | 8 ++++----
 src/lib/components/ImageFrame.svelte | 5 ++---
 src/routes/gallery/+page.svelte      | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4dc47c4..63f6637 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   googleapis:
     specifier: ^128.0.0
@@ -2979,3 +2975,7 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/lib/components/ImageFrame.svelte b/src/lib/components/ImageFrame.svelte
index 089439c..34dcb63 100644
--- a/src/lib/components/ImageFrame.svelte
+++ b/src/lib/components/ImageFrame.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
 	export let src: string;
 	export let alt = '';
+	export let loading: 'eager' | 'lazy' | undefined = undefined;
 	const u = new URL(src);
 	const filename = u.pathname.split('/').pop() || '9a8sda';
 	const int = (parseInt(filename?.slice(0, 8), 16) % 7) + 1;
@@ -31,7 +30,7 @@
 		<source srcset="{frame}.webp" type="image/webp" />
 
 		<!-- If neither AVIF nor WebP are supported, load PNG format -->
-		<img src="{frame}.png" alt="Painting Frame" />
+		<img src="{frame}.png" alt="Painting Frame" {loading} />
 	</picture>
 
 	<img src="/hang.png" class="hang" alt="painting hanging cord" />
diff --git a/src/routes/gallery/+page.svelte b/src/routes/gallery/+page.svelte
index a6f5277..5b9940b 100644
--- a/src/routes/gallery/+page.svelte
+++ b/src/routes/gallery/+page.svelte
@@ -37,7 +37,7 @@
 				class="item"
 				class:active={item.noble_name === last_name}
 			>
-				<ImageFrame src={item.portrait} />
+				<ImageFrame src={item.portrait} loading="lazy" />
 				<p>{item.noble_name}</p>
 			</div>
 		{/each}