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),
  },