feat(carousel): enhance circular layout handling and optimize page creation logic

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.spec.ts

@@ -59,6 +59,16 @@ 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');

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

@@ -70,6 +70,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);
 
@@ -270,14 +274,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 };