From b3bf06dc8630c76c7b0d96b2fcfb2941ede269aa Mon Sep 17 00:00:00 2001
From: Igor Danchenko <64441155+igordanchenko@users.noreply.github.com>
Date: Wed, 21 Aug 2024 17:58:23 -0400
Subject: [PATCH] fix: fix lazy loading in Firefox (fix #179)

---
 src/static/PhotoComponent.tsx   | 4 ++--
 src/static/StaticPhotoAlbum.tsx | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/static/PhotoComponent.tsx b/src/static/PhotoComponent.tsx
index 8315a5b..2dd4a02 100644
--- a/src/static/PhotoComponent.tsx
+++ b/src/static/PhotoComponent.tsx
@@ -38,7 +38,7 @@ function PhotoComponent<TPhoto extends Photo>(
   }: PhotoComponentProps<TPhoto>,
   ref: ForwardedRef,
 ) {
-  const { src, alt, title, href } = photo;
+  const { href } = photo;
 
   const context = { photo, index, width: round(width, 3), height: round(height, 3) };
 
@@ -57,7 +57,7 @@ function PhotoComponent<TPhoto extends Photo>(
       variables={{ photoWidth: context.width, photoHeight: context.height }}
       {...{ context, ...props }}
     >
-      <Component as="img" classes="image" render={image} {...{ src, alt, title, context, ...imageProps }} />
+      <Component as="img" classes="image" render={image} context={context} {...imageProps} />
       {extras?.({}, context)}
     </Component>
   );
diff --git a/src/static/StaticPhotoAlbum.tsx b/src/static/StaticPhotoAlbum.tsx
index f55304b..6b3728a 100644
--- a/src/static/StaticPhotoAlbum.tsx
+++ b/src/static/StaticPhotoAlbum.tsx
@@ -65,6 +65,7 @@ function StaticPhotoAlbum<TPhoto extends Photo>(
             >
               {photos.map((context) => {
                 const { photo, index, width } = context;
+                const { key, src, alt, title, label } = photo;
 
                 const onClick = onClickCallback
                   ? (event: React.MouseEvent) => {
@@ -78,18 +79,22 @@ function StaticPhotoAlbum<TPhoto extends Photo>(
                 }
 
                 const ariaLabel = <T extends {}>(props: T) => {
-                  return photo.label ? { "aria-label": photo.label, ...props } : props;
+                  return label ? { "aria-label": label, ...props } : props;
                 };
 
                 return (
                   <PhotoComponent
-                    key={photo.key ?? photo.src}
+                    key={key ?? src}
                     onClick={onClick}
                     render={restRender}
                     componentsProps={{
                       image: {
+                        // loading="lazy" must precede src and srcSet
                         loading: "lazy" as const,
                         decoding: "async" as const,
+                        src,
+                        alt,
+                        title,
                         ...srcSetAndSizes(photo, sizes, width, containerWidth, photosCount, spacing, padding),
                         ...unwrap(imageProps, context),
                       },