perf: lazily fetch products for CMS carousels (#1581)

intershop · Jan 29, 2024 · cbe9072 · cbe9072
1 parent 093f1ec
commit cbe9072
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/app/shared/components/product/products-list/products-list.component.html b/src/app/shared/components/product/products-list/products-list.component.html
@@ -3,9 +3,10 @@
     <ng-container *ngIf="listStyle === 'carousel'; else plainList">
       <div class="product-list">
         <swiper [config]="swiperConfig">
-          <ng-template *ngFor="let sku of products" swiperSlide>
+          <ng-template *ngFor="let sku of products" swiperSlide let-data>
             <div [ngClass]="listItemCSSClass">
               <ish-product-item
+                *ngIf="lazyFetch(data.isVisible, sku)"
                 ishProductContext
                 [sku]="sku"
                 [configuration]="listItemConfiguration"

diff --git a/src/app/shared/components/product/products-list/products-list.component.ts b/src/app/shared/components/product/products-list/products-list.component.ts
@@ -31,6 +31,11 @@ export class ProductsListComponent implements OnChanges {
 
   productSKUs$: Observable<string[]>;
 
+  /**
+   * track already fetched SKUs
+   */
+  private fetchedSKUs = new Set<string>();
+
   /**
    * configuration of swiper carousel
    * https://swiperjs.com/swiper-api
@@ -44,6 +49,7 @@ export class ProductsListComponent implements OnChanges {
     private shoppingFacade: ShoppingFacade
   ) {
     this.swiperConfig = {
+      watchSlidesProgress: true,
       direction: 'horizontal',
       navigation: true,
       pagination: {
@@ -64,6 +70,13 @@ export class ProductsListComponent implements OnChanges {
     );
   }
 
+  lazyFetch(fetch: boolean, sku: string): boolean {
+    if (fetch) {
+      this.fetchedSKUs.add(sku);
+    }
+    return this.fetchedSKUs.has(sku);
+  }
+
   /**
    * Configure Swiper slidesPerView/slidesPerGroup settings
    * with breakpoint responsive design considerations based on the given slide items.