fix: prevent flickering of product page when switching to another pro…

…duct detail page
intershop · Feb 16, 2021 · 2b27cb8 · 2b27cb8 · github-actions · Feb 16, 2021
1 parent bfa6647
commit 2b27cb8
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 29 deletions.
diff --git a/src/app/core/directives/product-context.directive.ts b/src/app/core/directives/product-context.directive.ts
@@ -49,6 +49,10 @@ export class ProductContextDirective implements OnInit, OnChanges {
   @Input()
   set parts(parts: SkuQuantityType[]) {
     this.context.set('parts', () => parts);
+    this.context.set('displayProperties', () => ({
+      readOnly: true,
+      addToBasket: true,
+    }));
   }
 
   @Input()

diff --git a/src/app/core/facades/product-context.facade.spec.ts b/src/app/core/facades/product-context.facade.spec.ts
@@ -54,10 +54,6 @@ describe('Product Context Facade', () => {
       Object {
         "allowZeroQuantity": false,
         "categoryId": null,
-        "displayProperties": Object {
-          "addToBasket": true,
-          "readOnly": true,
-        },
         "propagateActive": true,
         "requiredCompletenessLevel": 2,
       }

diff --git a/src/app/core/facades/product-context.facade.ts b/src/app/core/facades/product-context.facade.ts
@@ -127,10 +127,6 @@ export class ProductContextFacade extends RxState<ProductContext> {
       requiredCompletenessLevel: ProductCompletenessLevel.List,
       propagateActive: true,
       allowZeroQuantity: false,
-      displayProperties: {
-        readOnly: true,
-        addToBasket: true,
-      },
       // tslint:disable-next-line: no-null-keyword
       categoryId: null,
     });
@@ -332,6 +328,11 @@ export class ProductContextFacade extends RxState<ProductContext> {
       current[index] = childState;
       return current;
     });
+    this.set('displayProperties', state => ({
+      ...state.displayProperties,
+      readOnly: true,
+      addToBasket: true,
+    }));
   }
 
   validDebouncedQuantityUpdate$(time = 800) {

diff --git a/src/app/pages/product/product-images/product-images.component.html b/src/app/pages/product/product-images/product-images.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div *ngIf="product$ | async" class="row">
   <div class="col-lg-3 d-none d-lg-block">
     <div class="product-img-thumbs" data-type="S">
       <div class="product-thumb-set" [ngClass]="{ active: isActiveSlide(0) }" (click)="setActiveSlide(0)">

diff --git a/src/app/pages/product/product-images/product-images.component.ts b/src/app/pages/product/product-images/product-images.component.ts
@@ -1,9 +1,10 @@
-import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
 import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
-import { ProductHelper } from 'ish-core/models/product/product.model';
+import { AnyProductViewType, ProductHelper } from 'ish-core/models/product/product.model';
 
 /**
  * The Product Images Component
@@ -19,15 +20,21 @@ import { ProductHelper } from 'ish-core/models/product/product.model';
   templateUrl: './product-images.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductImagesComponent {
+export class ProductImagesComponent implements OnInit {
   @ViewChild('carousel') carousel: NgbCarousel;
 
   activeSlide = '0';
 
+  product$: Observable<AnyProductViewType>;
+
   constructor(private context: ProductContextFacade) {}
 
+  ngOnInit() {
+    this.product$ = this.context.select('product');
+  }
+
   getImageViewIDsExcludePrimary$(imageType: string) {
-    return this.context.select('product').pipe(map(p => ProductHelper.getImageViewIDsExcludePrimary(p, imageType)));
+    return this.product$.pipe(map(p => ProductHelper.getImageViewIDsExcludePrimary(p, imageType)));
   }
 
   /**

diff --git a/src/app/pages/product/product-page.component.html b/src/app/pages/product/product-page.component.html
@@ -1,19 +1,19 @@
 <div class="clearfix" data-testing-id="product-detail-page" itemscope itemtype="http://schema.org/Product">
-  <ish-loading *ngIf="productLoading$ | async; else productDetail"></ish-loading>
+  <ish-loading *ngIf="productLoading$ | async"></ish-loading>
 
-  <ng-template #productDetail>
-    <ish-breadcrumb></ish-breadcrumb>
+  <ish-breadcrumb></ish-breadcrumb>
 
-    <ish-product-detail></ish-product-detail>
+  <ish-product-detail></ish-product-detail>
 
-    <ish-product-master-variations></ish-product-master-variations>
+  <ish-product-master-variations></ish-product-master-variations>
 
-    <ish-product-bundle-parts></ish-product-bundle-parts>
+  <ish-product-bundle-parts></ish-product-bundle-parts>
 
-    <ish-retail-set-parts></ish-retail-set-parts>
+  <ish-retail-set-parts></ish-retail-set-parts>
 
-    <ish-product-links></ish-product-links>
-  </ng-template>
+  <ish-product-links></ish-product-links>
 </div>
 
-<ng-container *ishFeature="'recently'"> <ish-recently-viewed></ish-recently-viewed> </ng-container>
+<ng-container *ishFeature="'recently'"
+  ><ish-recently-viewed *ngIf="!(productLoading$ | async)"></ish-recently-viewed
+></ng-container>
diff --git a/src/app/pages/product/product-page.component.spec.ts b/src/app/pages/product/product-page.component.spec.ts
@@ -67,12 +67,7 @@ describe('Product Page Component', () => {
 
     fixture.detectChanges();
 
-    expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
-      Array [
-        "ish-loading",
-        "ish-recently-viewed",
-      ]
-    `);
+    expect(findAllCustomElements(element)).toContain('ish-loading');
   });
 
   it('should display product page components when product is available', () => {