From d8f8af6994a4d9717d18168accede214efd5159a Mon Sep 17 00:00:00 2001
From: Logan Dam <dam.loganza@gmail.com>
Date: Tue, 19 Nov 2024 23:41:02 +0100
Subject: [PATCH] attempt to fix hydration issue?

---
 frontend/src/lib/album/thumbnail.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/album/thumbnail.svelte b/frontend/src/lib/album/thumbnail.svelte
index 0eb001b..a10f0a4 100644
--- a/frontend/src/lib/album/thumbnail.svelte
+++ b/frontend/src/lib/album/thumbnail.svelte
@@ -25,6 +25,7 @@
   let srcSets = $derived(
     Object.entries(thumbnailSizes).flatMap(([sizeKey, maxWidth]) =>
       Object.entries(formats).map(([extension, mime]) => ({
+        key: `${image.id}|${sizeKey}|${extension}`,
         srcSet: `${StorageBaseUrl}/${image.hrefs[sizeKey]}.${extension} ${maxWidth}`,
         mime
       }))
@@ -34,7 +35,7 @@
 
 <a href={imageRoute}>
   <picture>
-    {#each srcSets as srcset}
+    {#each srcSets as srcset (srcset.key)}
       <source srcset={srcset.srcSet} type={srcset.mime} />
     {/each}
     <img {src} class="thumbnail-image" loading="lazy" alt="" />