fix: fix lazy loading in Firefox (fix #179)

igordanchenko · Aug 21, 2024 · b3bf06d · b3bf06d
1 parent b586d6c
commit b3bf06d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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),
                       },