From d7c015e71eeff1fdd796ecc7a591c0662371cc40 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Mon, 7 Sep 2026 09:04:03 -0300
Subject: [PATCH] fix(product-list): prioritize first image in non-carousel
 layouts and update tests

---
 .../pages/store-home-page/store-home-page.component.html  | 3 ++-
 .../components/product-list/product-list.component.html   | 4 +++-
 .../product-list/product-list.component.spec.ts           | 8 ++++++++
 .../components/product-list/product-list.component.ts     | 1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.html b/src/app/features/store/pages/store-home-page/store-home-page.component.html
index 697aa4c..f57c312 100644
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.html
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.html
@@ -22,7 +22,7 @@
     No hay productos disponibles en este momento.
   </p>
 } @else {
-  @for (group of catalog(); track group.id) {
+  @for (group of catalog(); track group.id; let first = $first) {
     <app-store-section [attr.id]="group.code" [title]="group.title">
       <app-product-list
         [layout]="group.layout"
@@ -30,6 +30,7 @@
         [items]="group.items"
         [loading]="isGroupLoading(group.id)"
         [loadImages]="!hasMainCarouselImages() || mainCarouselReady()"
+        [prioritizeFirstImage]="first && !hasMainCarouselImages()"
         [unavailableVariantIds]="unavailableVariantIds()"
         [savingProductIds]="savingProductIds()"
         (buy)="onBuyProduct($event)"
diff --git a/src/app/shared/components/product-list/product-list.component.html b/src/app/shared/components/product-list/product-list.component.html
index b32df87..14d4c52 100644
--- a/src/app/shared/components/product-list/product-list.component.html
+++ b/src/app/shared/components/product-list/product-list.component.html
@@ -51,7 +51,9 @@
           [title]="item.nombre"
           [originalPrice]="price(item)"
           [unavailableMessage]="item.unavailable_message ?? null"
-          [imagePriority]="loadImages() && index < 4"
+          [imagePriority]="
+            loadImages() && prioritizeFirstImage() && groupLayout() !== 'carousel' && index === 0
+          "
           (buy)="emitProductDetailBuy(item)"
         />
       }
diff --git a/src/app/shared/components/product-list/product-list.component.spec.ts b/src/app/shared/components/product-list/product-list.component.spec.ts
index 32ecc20..7f3ca15 100644
--- a/src/app/shared/components/product-list/product-list.component.spec.ts
+++ b/src/app/shared/components/product-list/product-list.component.spec.ts
@@ -143,6 +143,14 @@ describe('ProductListComponent', () => {
 
     expect(element.querySelector('.product-list--column')).not.toBeNull();
     expect(element.querySelectorAll('app-product-column-with-image')).toHaveLength(2);
+    expect(element.querySelectorAll('img[fetchpriority="high"]')).toHaveLength(1);
+  });
+
+  it('does not prioritize images rendered in a circular carousel', async () => {
+    const fixture = await render('column_with_image', items, 'carousel');
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelectorAll('img[fetchpriority="high"]')).toHaveLength(0);
   });
 
   it('renders cart products next to each other in the column grid', async () => {
diff --git a/src/app/shared/components/product-list/product-list.component.ts b/src/app/shared/components/product-list/product-list.component.ts
index e8c3139..e938dea 100644
--- a/src/app/shared/components/product-list/product-list.component.ts
+++ b/src/app/shared/components/product-list/product-list.component.ts
@@ -68,6 +68,7 @@ export class ProductListComponent {
   readonly items = input.required<CatalogFeaturedItems>();
   readonly loading = input(false);
   readonly loadImages = input(true);
+  readonly prioritizeFirstImage = input(true);
   readonly unavailableVariantIds = input<ReadonlySet<number>>(new Set<number>());
   readonly savingProductIds = input<ReadonlySet<number>>(new Set<number>());