From 4794f4e62bfa3c34de3e2e3f2dd8120948bc01e6 Mon Sep 17 00:00:00 2001
From: Stefan Forstenlechner <stefan@forstenlechner.dev>
Date: Tue, 20 Aug 2024 23:20:11 +0200
Subject: [PATCH] Fix issue that thumbnails were not used

---
 picture-gallery-client/src/ImageGallery/FolderGallery.tsx | 2 +-
 picture-gallery-client/src/ImageGallery/ImageGallery.tsx  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/picture-gallery-client/src/ImageGallery/FolderGallery.tsx b/picture-gallery-client/src/ImageGallery/FolderGallery.tsx
index 03cef0e..4c28b9b 100644
--- a/picture-gallery-client/src/ImageGallery/FolderGallery.tsx
+++ b/picture-gallery-client/src/ImageGallery/FolderGallery.tsx
@@ -13,7 +13,7 @@ export interface PhotoWithFolder extends ImageWithThumbnail {
 const PreviewFolder = ({ folder }: { folder: FolderPreview }) => {
   return (
     <img
-      src={folder.imagePreview.src}
+      src={folder.imagePreview.thumbnail}
       alt={folder.name}
       loading="lazy"
       style={{
diff --git a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
index b9f0228..8d7e6dd 100644
--- a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
+++ b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
@@ -20,10 +20,10 @@ export const ImageGallery = ({ images }: { images: ImageWithThumbnail[] }) => {
     <>
       <MasonryPhotoAlbum
         photos={images}
-        componentsProps={{
-          image: {
-            loading: "lazy",
-          },
+        render={{
+          image: (props, context) => (
+            <img {...props} src={context.photo.thumbnail} loading={"lazy"} />
+          ),
         }}
         onClick={({ index }) => setIndex(index)}
       />