feat(store-home-page): implement lazy loading for product thumbnails and enhance deferred loading for sections

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">
+    @if (first) {
-      <app-product-list
+      <ng-container
-        [layout]="group.layout"
+        [ngTemplateOutlet]="catalogGroup"
-        [groupLayout]="group.group_layout"
+        [ngTemplateOutletContext]="{ $implicit: group, prioritizeFirstImage: true }"
-        [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)"
       />
-    </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',