Merge branch 'develop' into ju/support-node-22

Signed-off-by: Joel Uong <88680517+joeluong-sfcc@users.noreply.github.com>
SalesforceCommerceCloud · Jan 29, 2025 · 1e9fb3a · 1e9fb3a
2 parents 97672c1 + 81697ce
commit 1e9fb3a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
@@ -9,8 +9,10 @@
 - Allow store to be selectable in StoreLocator [#2187](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2187)
 - [BUG] Fixed "getCheckboxProps is not a function" when rendering checkout page in generated app.[#2140](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2140)
 - Replace transfer basket call with merge basket on checkout [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
+- [BUG] Fix images being fetced multiple times on Safari [#2223](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223)
 - Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)
 
+
 ### Accessibility Improvements
 - [a11y] Fix LinkList component to follow a11y practise [#2098])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2098)
 

diff --git a/packages/template-retail-react-app/app/utils/responsive-image.js b/packages/template-retail-react-app/app/utils/responsive-image.js
@@ -38,10 +38,13 @@ export const getResponsiveImageAttributes = ({src, widths, breakpoints = default
     themeBreakpoints = breakpoints
     breakpointLabels = getBreakpointLabels(themeBreakpoints)
 
+    // Order of these attributes matter! If src is not last, Safari will refetch images
+    // multiple times (once when it processes src and again when it processes sizes / srcSet)
+    // See https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223
     return {
-        src: getSrcWithoutOptionalParams(src),
         sizes: mapWidthsToSizes(widths),
-        srcSet: mapWidthsToSrcSet(widths, src)
+        srcSet: mapWidthsToSrcSet(widths, src),
+        src: getSrcWithoutOptionalParams(src)
     }
 }