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,6 +23,32 @@
   </p>
 } @else {
   @for (group of catalog(); track group.id; let first = $first) {
+    @if (first) {
+      <ng-container
+        [ngTemplateOutlet]="catalogGroup"
+        [ngTemplateOutletContext]="{ $implicit: group, prioritizeFirstImage: true }"
+      />
+    } @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"
@@ -30,7 +56,7 @@
       [items]="group.items"
       [loading]="isGroupLoading(group.id)"
       [loadImages]="!hasMainCarouselImages() || mainCarouselReady()"
-        [prioritizeFirstImage]="first && !hasMainCarouselImages()"
+      [prioritizeFirstImage]="prioritizeFirstImage && !hasMainCarouselImages()"
       [unavailableVariantIds]="unavailableVariantIds()"
       [savingProductIds]="savingProductIds()"
       (buy)="onBuyProduct($event)"
@@ -38,8 +64,7 @@
       (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">

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',