feat(carousel): add size probe for responsive layout and optimize item width calculation

Reviewed-on: https://gitea.quo.ar/tbianchini/shopit-front/pulls/8

src/app/features/store/components/product-carousel/product-carousel.component.html

@@ -62,7 +62,13 @@
           (click)="selectImage(idx)"
           [attr.aria-label]="'Select image ' + (idx + 1)"
         >
-          <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
+          <img
+            [src]="image"
+            alt="Product thumbnail"
+            loading="lazy"
+            decoding="async"
+            class="w-100 h-100 object-fit-cover"
+          />
         </button>
       }
     </div>

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -23,24 +23,49 @@
   </p>
 } @else {
   @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"
-        [groupLayout]="group.group_layout"
-        [items]="group.items"
-        [loading]="isGroupLoading(group.id)"
-        [loadImages]="!hasMainCarouselImages() || mainCarouselReady()"
-        [prioritizeFirstImage]="first && !hasMainCarouselImages()"
-        [unavailableVariantIds]="unavailableVariantIds()"
-        [savingProductIds]="savingProductIds()"
-        (buy)="onBuyProduct($event)"
-        (addToCart)="onAddToCart($event)"
-        (pageChange)="onPageChange(group.id, $event)"
+    @if (first) {
+      <ng-container
+        [ngTemplateOutlet]="catalogGroup"
+        [ngTemplateOutletContext]="{ $implicit: group, prioritizeFirstImage: true }"
       />
-    </app-store-section>
+    } @else {
+      @defer (on viewport; prefetch on idle) {
+        <ng-container
+          [ngTemplateOutlet]="catalogGroup"
+          [ngTemplateOutletContext]="{ $implicit: group, prioritizeFirstImage: false }"
+        />
+      } @placeholder {
+        <section
+          class="store-home__deferred-group-placeholder"
+          [attr.aria-label]="group.title"
+        ></section>
+      }
+    }
   }
 }
 
+<ng-template
+  #catalogGroup
+  let-group
+  let-prioritizeFirstImage="prioritizeFirstImage"
+>
+  <app-store-section [attr.id]="group.code" [title]="group.title">
+    <app-product-list
+      [layout]="group.layout"
+      [groupLayout]="group.group_layout"
+      [items]="group.items"
+      [loading]="isGroupLoading(group.id)"
+      [loadImages]="!hasMainCarouselImages() || mainCarouselReady()"
+      [prioritizeFirstImage]="prioritizeFirstImage && !hasMainCarouselImages()"
+      [unavailableVariantIds]="unavailableVariantIds()"
+      [savingProductIds]="savingProductIds()"
+      (buy)="onBuyProduct($event)"
+      (addToCart)="onAddToCart($event)"
+      (pageChange)="onPageChange(group.id, $event)"
+    />
+  </app-store-section>
+</ng-template>
+
 @if (additionalInfo(); as content) {
   <app-store-section class="store-home__additional-info" title="Información adicional">
     <div class="store-home__additional-info-content" [innerHTML]="content"></div>

src/app/features/store/pages/store-home-page/store-home-page.component.scss

@@ -15,6 +15,13 @@ app-store-section[id] {
   scroll-margin-top: 8rem;
 }
 
+.store-home__deferred-group-placeholder {
+  display: block;
+  min-height: clamp(24rem, 42vw, 34rem);
+  content-visibility: auto;
+  contain-intrinsic-size: auto 30rem;
+}
+
 :host > .store-home__additional-info:not(:first-child) {
   margin-top: clamp(3rem, 6vw, 5rem);
 }

src/app/features/store/pages/store-home-page/store-home-page.component.ts

@@ -8,6 +8,7 @@ import {
   inject,
   signal,
 } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ActivatedRoute, Router } from '@angular/router';
 import { finalize, Subscription } from 'rxjs';
@@ -44,6 +45,7 @@ import {
     ProductListComponent,
     HeroBannerComponent,
     MainCarouselComponent,
+    NgTemplateOutlet,
   ],
   templateUrl: './store-home-page.component.html',
   styleUrl: './store-home-page.component.scss',

src/app/shared/components/carousel/carousel.component.html

@@ -1,4 +1,10 @@
 <section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
+  <span
+    #sizeProbe
+    class="carousel__size-probe"
+    aria-hidden="true"
+    [style.width]="itemBasis()"
+  ></span>
   <div class="carousel__frame" [class.carousel__frame--with-controls]="hasMultipleItems()">
     <div
       #viewport

src/app/shared/components/carousel/carousel.component.scss

@@ -4,8 +4,17 @@
 }
 
 .carousel {
+  position: relative;
   width: 100%;
 
+  &__size-probe {
+    position: absolute;
+    height: 0;
+    visibility: hidden;
+    pointer-events: none;
+    contain: strict;
+  }
+
   &__frame {
     position: relative;
     display: grid;

src/app/shared/components/carousel/carousel.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, signal, TemplateRef, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CarouselComponent, CarouselItemContext } from './carousel.component';
 
 interface TestItem {
@@ -16,7 +16,7 @@ interface TestItem {
     </ng-template>
 
     <app-carousel
-      [items]="items"
+      [items]="items()"
       [itemTemplate]="itemTemplate"
       [scrollStep]="120"
       [gap]="16"
@@ -28,11 +28,11 @@ interface TestItem {
 class TestHostComponent {
   readonly circular = signal(false);
 
-  readonly items: TestItem[] = [
+  readonly items = signal<TestItem[]>([
     { id: 1, label: 'Primero' },
     { id: 2, label: 'Segundo' },
     { id: 3, label: 'Tercero' },
-  ];
+  ]);
 
   readonly carousel = viewChild.required(CarouselComponent<TestItem>);
   readonly itemTemplate =
@@ -41,8 +41,47 @@ class TestHostComponent {
 
 describe('CarouselComponent', () => {
   let fixture: ComponentFixture<TestHostComponent>;
+  let frames: Map<number, FrameRequestCallback>;
+  let resize: () => void;
+  let disconnect: ReturnType<typeof vi.fn>;
+  const flushLayout = () => {
+    const pending = [...frames.values()];
+    frames.clear();
+    pending.forEach((callback) => callback(0));
+    fixture.detectChanges();
+  };
+  const setDimensions = (width: number, basis: number) => {
+    const host = fixture.nativeElement.querySelector('app-carousel');
+    Object.defineProperty(host, 'clientWidth', { configurable: true, value: width });
+    const probe = fixture.nativeElement.querySelector('.carousel__size-probe');
+    probe.getBoundingClientRect = () => ({ width: basis }) as DOMRect;
+  };
 
   beforeEach(async () => {
+    frames = new Map();
+    let frameId = 0;
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        frames.set(++frameId, callback);
+        return frameId;
+      }),
+    );
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((id: number) => frames.delete(id)),
+    );
+    disconnect = vi.fn();
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        constructor(callback: () => void) {
+          resize = callback;
+        }
+        observe() {}
+        disconnect = disconnect;
+      },
+    );
     await TestBed.configureTestingModule({
       imports: [TestHostComponent],
     }).compileComponents();
@@ -51,6 +90,75 @@ describe('CarouselComponent', () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    fixture.destroy();
+    vi.unstubAllGlobals();
+  });
+
+  it('agrupa las mediciones y no se realimenta al renderizar o navegar', async () => {
+    fixture.componentInstance.circular.set(true);
+    setDimensions(650, 200);
+    fixture.detectChanges();
+    resize();
+    resize();
+    expect(frames.size).toBe(1);
+    flushLayout();
+    await Promise.resolve();
+    expect(frames.size).toBe(0);
+    const carousel = fixture.componentInstance.carousel();
+    expect(carousel['itemsPerPage']()).toBe(2);
+    carousel.next();
+    fixture.detectChanges();
+    const track = fixture.nativeElement.querySelector('.carousel__track');
+    track.dispatchEvent(new TransitionEvent('transitionend', { propertyName: 'transform' }));
+    fixture.detectChanges();
+    await Promise.resolve();
+    resize(); // Same width, even if the new cards have a different height.
+    expect(frames.size).toBe(0);
+    expect(carousel['currentPage']()).toBe(1);
+    expect(carousel['itemWidth']()).toBe(269);
+  });
+
+  it('recalcula al cambiar el ancho y la base responsive de las tarjetas', () => {
+    setDimensions(650, 200);
+    resize();
+    flushLayout();
+    setDimensions(350, 200);
+    resize();
+    flushLayout();
+    expect(fixture.componentInstance.carousel()['itemsPerPage']()).toBe(1);
+    setDimensions(350, 100);
+    resize();
+    flushLayout();
+    expect(fixture.componentInstance.carousel()['itemsPerPage']()).toBe(2);
+    expect(frames.size).toBe(0);
+  });
+
+  it('actualiza productos y admite una lista vacía sin anchos inválidos', () => {
+    setDimensions(650, 200);
+    flushLayout();
+    fixture.componentInstance.items.set([]);
+    fixture.detectChanges();
+    expect(frames.size).toBe(1);
+    flushLayout();
+    const carousel = fixture.componentInstance.carousel();
+    expect(carousel['itemWidth']()).toBeNull();
+    expect(carousel['hasOverflow']()).toBe(false);
+    fixture.componentInstance.items.set([{ id: 4, label: 'Nuevo' }]);
+    fixture.detectChanges();
+    flushLayout();
+    expect(carousel['itemWidth']()).toBe(650);
+    expect(fixture.nativeElement.querySelectorAll('article')).toHaveLength(1);
+    expect(frames.size).toBe(0);
+  });
+
+  it('cancela mediciones pendientes y desconecta el observador al destruirse', () => {
+    expect(frames.size).toBe(1);
+    fixture.destroy();
+    expect(frames.size).toBe(0);
+    expect(disconnect).toHaveBeenCalledOnce();
+  });
+
   it('renderiza el template provisto para cada elemento', () => {
     const articles = fixture.nativeElement.querySelectorAll('article');
 
@@ -59,6 +167,17 @@ describe('CarouselComponent', () => {
     expect(articles[1].getAttribute('data-index')).toBe('1');
   });
 
+  it('permite inspeccionar las páginas antes de medir el viewport sin generar listas enormes', () => {
+    const carousel = fixture.componentInstance.carousel();
+    fixture.componentInstance.circular.set(true);
+    carousel['itemsPerPage'].set(Number.MAX_SAFE_INTEGER);
+
+    expect(carousel['circularPages']()).toEqual([]);
+    expect(carousel['createPage']('current', 0).items.map((entry) => entry.item.id)).toEqual([
+      1, 2, 3,
+    ]);
+  });
+
   it('expone una región accesible y controles con etiquetas', () => {
     const region = fixture.nativeElement.querySelector('[role="region"]');
     const buttons = fixture.nativeElement.querySelectorAll('button');
@@ -99,7 +218,7 @@ describe('CarouselComponent', () => {
 
   it('usa todo el ancho y distribuye el espacio sobrante entre elementos completos', () => {
     const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement;
-    const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement;
+    const firstItem = fixture.nativeElement.querySelector('.carousel__size-probe') as HTMLElement;
 
     Object.defineProperty(host, 'clientWidth', {
       configurable: true,
@@ -112,7 +231,7 @@ describe('CarouselComponent', () => {
         }) as DOMRect,
     );
 
-    fixture.componentInstance.carousel().ngAfterViewInit();
+    flushLayout();
     fixture.detectChanges();
 
     const frame = fixture.nativeElement.querySelector('.carousel__frame') as HTMLElement;
@@ -128,7 +247,7 @@ describe('CarouselComponent', () => {
     fixture.detectChanges();
 
     const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement;
-    const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement;
+    const firstItem = fixture.nativeElement.querySelector('.carousel__size-probe') as HTMLElement;
 
     Object.defineProperty(host, 'clientWidth', {
       configurable: true,
@@ -141,7 +260,7 @@ describe('CarouselComponent', () => {
         }) as DOMRect,
     );
 
-    fixture.componentInstance.carousel().ngAfterViewInit();
+    flushLayout();
     fixture.detectChanges();
 
     const pages = fixture.nativeElement.querySelectorAll('.carousel__page');

src/app/shared/components/carousel/carousel.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  afterRenderEffect,
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
@@ -10,6 +11,7 @@ import {
   inject,
   input,
   signal,
+  untracked,
   viewChild,
 } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
@@ -45,12 +47,15 @@ export class CarouselComponent<T> implements AfterViewInit {
   private readonly platformId = inject(PLATFORM_ID);
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly viewport = viewChild.required<ElementRef<HTMLElement>>('viewport');
+  private readonly sizeProbe = viewChild.required<ElementRef<HTMLElement>>('sizeProbe');
+  private layoutFrame: number | null = null;
 
   readonly items = input.required<readonly T[]>();
   readonly itemTemplate = input.required<TemplateRef<CarouselItemContext<T>>>();
   readonly trackBy = input<CarouselTrackBy<T>>((index) => index);
   readonly scrollStep = input<number | null>(null);
   readonly gap = input(0);
+  readonly itemBasis = input('16rem');
   readonly circular = input(false);
   readonly ariaLabel = input('Carrusel');
   readonly previousLabel = input('Mostrar elementos anteriores');
@@ -70,6 +75,10 @@ export class CarouselComponent<T> implements AfterViewInit {
   );
   protected readonly isCircularLayout = computed(() => this.circular() && this.pageCount() > 1);
   protected readonly circularPages = computed<CarouselPage<T>[]>(() => {
+    if (!this.isCircularLayout()) {
+      return [];
+    }
+
     const pageCount = this.pageCount();
     const currentPage = this.normalizePage(this.currentPage(), pageCount);
 
@@ -86,27 +95,51 @@ export class CarouselComponent<T> implements AfterViewInit {
     () => !this.hasOverflow() || (!this.circular() && !this.canScrollNext()),
   );
 
+  constructor() {
+    afterRenderEffect(() => {
+      this.items();
+      this.gap();
+      this.circular();
+      this.itemBasis();
+      this.itemTemplate();
+      // Layout outputs must never become dependencies of this effect.
+      untracked(() => this.scheduleLayout());
+    });
+  }
+
+  private scheduleLayout(): void {
+    if (this.destroyRef.destroyed || this.layoutFrame !== null) return;
+    this.layoutFrame = requestAnimationFrame(() => {
+      this.layoutFrame = null;
+      this.refreshLayout();
+    });
+  }
+
   ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
       return;
     }
 
-    const viewport = this.viewport().nativeElement;
-    this.refreshLayout();
-
+    let previousWidth = -1;
+    let previousBasis = -1;
     const resizeObserver =
-      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => this.refreshLayout());
-    resizeObserver?.observe(this.host.nativeElement);
-
-    const mutationObserver =
-      typeof MutationObserver === 'undefined'
+      typeof ResizeObserver === 'undefined'
         ? null
-        : new MutationObserver(() => this.refreshLayout());
-    mutationObserver?.observe(viewport, { childList: true, subtree: true });
+        : new ResizeObserver(() => {
+            const width = this.host.nativeElement.clientWidth;
+            const basis = this.sizeProbe().nativeElement.getBoundingClientRect().width;
+            // Image loads and page rotation can change height, but not the layout inputs.
+            if (width === previousWidth && basis === previousBasis) return;
+            previousWidth = width;
+            previousBasis = basis;
+            this.scheduleLayout();
+          });
+    resizeObserver?.observe(this.host.nativeElement);
+    resizeObserver?.observe(this.sizeProbe().nativeElement);
 
     this.destroyRef.onDestroy(() => {
       resizeObserver?.disconnect();
-      mutationObserver?.disconnect();
+      if (this.layoutFrame !== null) cancelAnimationFrame(this.layoutFrame);
     });
   }
 
@@ -218,24 +251,32 @@ export class CarouselComponent<T> implements AfterViewInit {
   }
 
   private refreshLayout(): void {
-    const viewport = this.viewport().nativeElement;
-    const firstItem = viewport.querySelector<HTMLElement>('.carousel__item');
+    const itemCount = this.items().length;
     const availableWidth = this.host.nativeElement.clientWidth;
     const availableViewportWidth = Math.max(
       availableWidth - (this.hasMultipleItems() ? CarouselComponent.CONTROL_SLOT_WIDTH * 2 : 0),
       0,
     );
 
-    if (!firstItem || availableViewportWidth <= 0) {
+    if (itemCount === 0) {
+      this.itemsPerPage.set(1);
+      this.currentPage.set(0);
+      this.transitionDirection.set(0);
+      this.itemWidth.set(null);
+      this.hasOverflow.set(false);
+      this.canScrollPrevious.set(false);
+      this.canScrollNext.set(false);
+      return;
+    }
+
+    if (availableViewportWidth <= 0) {
       this.itemWidth.set(null);
       this.refreshNavigation();
       return;
     }
 
-    const assignedWidth = firstItem.style.width;
-    firstItem.style.width = '';
-    const naturalItemWidth = firstItem.getBoundingClientRect().width;
-    firstItem.style.width = assignedWidth;
+    // Measure a stable CSS basis, never a card whose content/width we just changed.
+    const naturalItemWidth = this.sizeProbe().nativeElement.getBoundingClientRect().width;
 
     if (naturalItemWidth <= 0) {
       this.itemWidth.set(null);
@@ -244,9 +285,9 @@ export class CarouselComponent<T> implements AfterViewInit {
     }
 
     const gap = this.resolvedGap();
-    const fittingItems = Math.max(
-      1,
-      Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap)),
+    const fittingItems = Math.min(
+      itemCount,
+      Math.max(1, Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap))),
     );
     const visibleItems = Math.min(fittingItems, this.items().length);
     const distributedItemWidth =
@@ -258,7 +299,12 @@ export class CarouselComponent<T> implements AfterViewInit {
       this.transitionDirection.set(0);
     }
 
-    this.itemWidth.set(distributedItemWidth);
+    if (this.itemWidth() !== distributedItemWidth) this.itemWidth.set(distributedItemWidth);
+    const normalizedPage = this.normalizePage(this.currentPage(), this.pageCount());
+    if (normalizedPage !== this.currentPage()) {
+      this.currentPage.set(normalizedPage);
+      this.transitionDirection.set(0);
+    }
     if (this.circular()) {
       const hasOverflow = this.items().length > fittingItems;
       this.hasOverflow.set(hasOverflow);
@@ -270,14 +316,20 @@ export class CarouselComponent<T> implements AfterViewInit {
   }
 
   private createPage(slot: CarouselPage<T>['slot'], page: number): CarouselPage<T> {
+    const sourceItems = this.items();
+    // Layout has not necessarily been measured when a computed value is inspected.
+    const pageSize = Math.min(this.itemsPerPage(), sourceItems.length);
+    if (pageSize === 0) {
+      return { slot, items: [] };
+    }
     const pageCount = this.pageCount();
     const normalizedPage = this.normalizePage(page, pageCount);
-    const start = normalizedPage * this.itemsPerPage();
+    const start = normalizedPage * pageSize;
     const items: CarouselPageItem<T>[] = [];
 
-    for (let offset = 0; offset < this.itemsPerPage(); offset += 1) {
-      const index = (start + offset) % this.items().length;
-      items.push({ item: this.items()[index], index });
+    for (let offset = 0; offset < pageSize; offset += 1) {
+      const index = (start + offset) % sourceItems.length;
+      items.push({ item: sourceItems[index], index });
     }
 
     return { slot, items };

src/app/shared/components/product-list/product-list.component.html

@@ -67,6 +67,9 @@
     [itemTemplate]="productItem"
     [trackBy]="trackProduct"
     [gap]="24"
+    [itemBasis]="
+      effectiveLayout() === 'row' ? 'clamp(18rem, 70vw, 32rem)' : 'clamp(15rem, 30vw, 18rem)'
+    "
     [circular]="true"
     ariaLabel="Productos destacados"
   />