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

joeluong-sfcc · web-flow · commit 1e9fb3a4cd4a · 2025-01-29T13:30:46.000-05:00
Signed-off-by: Joel Uong &lt;88680517+joeluong-sfcc@users.noreply.github.com&gt;
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)
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -38,10 +38,13 @@ export const getResponsiveImageAttributes = ({src, widths, breakpoints = default`
`38`	`38`	`themeBreakpoints = breakpoints`
`39`	`39`	`breakpointLabels = getBreakpointLabels(themeBreakpoints)`
`40`	`40`
	`41`	`+ // Order of these attributes matter! If src is not last, Safari will refetch images`
	`42`	`+ // multiple times (once when it processes src and again when it processes sizes / srcSet)`
	`43`	`+ // See https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223`
`41`	`44`	`return {`
`42`		`- src: getSrcWithoutOptionalParams(src),`
`43`	`45`	`sizes: mapWidthsToSizes(widths),`
`44`		`- srcSet: mapWidthsToSrcSet(widths, src)`
	`46`	`+ srcSet: mapWidthsToSrcSet(widths, src),`
	`47`	`+ src: getSrcWithoutOptionalParams(src)`
`45`	`48`	`}`
`46`	`49`	`}`
`47`	`50`