From 1cae0187e81060d8953c04851da63a43d28bb044 Mon Sep 17 00:00:00 2001
From: "cavaglieridomenico@gmail.com" <cavaglieridomenico@gmail.com>
Date: Fri, 12 Jul 2024 20:05:04 +0200
Subject: [PATCH 1/2] Feature: loading attribute depends only on the
 fetchpriority value

---
 CHANGELOG.md                  | 2 ++
 react/ProductSummaryImage.tsx | 6 ++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71070947..7c54f765 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- The logic of the `loading` attribute depends only on the `fetchpriority` value and no longer on the image resizing
+
 ## [2.89.0] - 2023-12-21
 
 ### Added
diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx
index b456bcc4..ce44c7e4 100644
--- a/react/ProductSummaryImage.tsx
+++ b/react/ProductSummaryImage.tsx
@@ -244,19 +244,17 @@ function Image({
    * device-based guess was wrong. Has to be looked into */
   const dpi = isMobile ? 2 : 1
 
-  const shouldResize = !!(width || height)
-
   return (
     <img
       src={getImageSrc({ src, width, height, dpi, aspectRatio })}
       style={getStyle({ width, height, aspectRatio, maxHeight })}
-      // @ts-expect-error This property exists in HTML
       loading={
-        shouldResize ? 'lazy' : fetchpriority === 'high' ? 'eager' : 'auto'
+        fetchpriority === 'low' ? 'lazy' : 'eager'
       }
       alt={alt}
       className={className}
       onError={onError}
+      // @ts-expect-error This property exists in HTML
       fetchpriority={fetchpriority}
     />
   )

From cc790698e4fc10991264504fe86df3f937c1f8d2 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Wed, 25 Sep 2024 14:44:49 -0300
Subject: [PATCH 2/2] lint fix

---
 react/ProductSummaryImage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx
index ce44c7e4..802dd27c 100644
--- a/react/ProductSummaryImage.tsx
+++ b/react/ProductSummaryImage.tsx
@@ -248,9 +248,7 @@ function Image({
     <img
       src={getImageSrc({ src, width, height, dpi, aspectRatio })}
       style={getStyle({ width, height, aspectRatio, maxHeight })}
-      loading={
-        fetchpriority === 'low' ? 'lazy' : 'eager'
-      }
+      loading={fetchpriority === 'low' ? 'lazy' : 'eager'}
       alt={alt}
       className={className}
       onError={onError}