deps: remove deferLoad and use loading lazy (#1097)

BREAKING CHANGES: Removed `(deferLoad)` directive and replaced it with `loading="lazy"` (see [Migrations / 2.4 to 3.0](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/migrations.md#24-to-30) for more details).
intershop · Jun 27, 2022 · 8c74111 · 8c74111
1 parent 7fc3582
commit 8c74111
Show file tree

Hide file tree

Showing 18 changed files with 23 additions and 105 deletions.
diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
@@ -7,6 +7,11 @@ kb_sync_latest_only
 
 # Migrations
 
+## 2.4 to 3.0
+
+Since the used deferred load library is no longer maintained it is removed and replaced with similar standard browser functionality [`loading="lazy"`](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes).
+All uses of the `(deferLoad)` directive in custom code need to be replaced.
+
 ## 2.3 to 2.4
 
 The PWA 2.4 contains an Angular update to version 13.3.10 and many other dependencies updates.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,7 +86,6 @@
     "@ngx-translate/http-loader": "^7.0.0",
     "@rx-angular/state": "1.6.0",
     "@sentry/browser": "^6.19.7",
-    "@trademe/ng-defer-load": "^8.2.1",
     "angular-oauth2-oidc": "13.0.1",
     "angular2-uuid": "^1.1.1",
     "angulartics2": "^12.1.0",
@@ -184,11 +183,6 @@
     "ts-node": "~10.8.0",
     "typescript": "~4.6.4"
   },
-  "overrides": {
-    "@trademe/ng-defer-load": {
-      "rxjs": "$rxjs"
-    }
-  },
   "lint-staged": {
     "docs/**/*.md": [
       "node docs/check-kb-labels",

diff --git a/src/app/pages/category/category-image/category-image.component.html b/src/app/pages/category/category-image/category-image.component.html
@@ -1,3 +1,3 @@
-<div (deferLoad)="showImage = true" class="defer-load">
-  <img *ngIf="showImage" [src]="categoryImageUrl" itemprop="image" />
+<div>
+  <img loading="lazy" [src]="categoryImageUrl" itemprop="image" />
 </div>
diff --git a/src/app/pages/category/category-image/category-image.component.spec.ts b/src/app/pages/category/category-image/category-image.component.spec.ts
@@ -9,12 +9,6 @@ describe('Category Image Component', () => {
   let element: HTMLElement;
   let fixture: ComponentFixture<CategoryImageComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CategoryImageComponent],
-    }).compileComponents();
-  });
-
   beforeEach(() => {
     fixture = TestBed.createComponent(CategoryImageComponent);
     component = fixture.componentInstance;
@@ -31,7 +25,6 @@ describe('Category Image Component', () => {
       ],
     } as Category;
     component.category = category;
-    component.showImage = true;
     component.ngOnChanges();
     fixture.detectChanges();
   });

diff --git a/src/app/pages/category/category-image/category-image.component.ts b/src/app/pages/category/category-image/category-image.component.ts
@@ -18,11 +18,6 @@ export class CategoryImageComponent implements OnChanges {
 
   categoryImageUrl = '/assets/img/not_available.png';
 
-  /**
-   * deferred loading flag
-   */
-  showImage = false;
-
   ngOnChanges() {
     this.setCategoryImageUrl();
   }

diff --git a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html
@@ -12,12 +12,8 @@
 </ng-container>
 
 <ng-template #imageEnhanced>
-  <div
-    (deferLoad)="showImage = true"
-    class="enhanced-image-container defer-load"
-    [ngClass]="pagelet.stringParam('CSSClass')"
-  >
-    <picture *ngIf="showImage" class="enhanced-image">
+  <div class="enhanced-image-container" [ngClass]="pagelet.stringParam('CSSClass')">
+    <picture class="enhanced-image">
       <source
         *ngIf="pagelet.hasParam('ImageXS')"
         [srcset]="pagelet.stringParam('ImageXS')"
@@ -34,6 +30,7 @@
         media="(max-width: 1199px)"
       />
       <img
+        loading="lazy"
         [src]="pagelet.stringParam('Image')"
         [attr.alt]="pagelet.stringParam('AlternateText')"
         class="enhanced-image"

diff --git a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.ts
@@ -14,9 +14,4 @@ export class CMSImageEnhancedComponent implements CMSComponent {
 
   isRouterLink = ContentViewHelper.isRouterLink;
   routerLink = ContentViewHelper.getRouterLink;
-
-  /**
-   * deferred loading flag
-   */
-  showImage = false;
 }
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.html b/src/app/shared/cms/components/cms-image/cms-image.component.html
@@ -12,7 +12,7 @@
 </ng-container>
 
 <ng-template #image>
-  <div (deferLoad)="showImage = true" class="defer-load" [ngClass]="pagelet.stringParam('CSSClass')">
-    <img *ngIf="showImage" [src]="pagelet.stringParam('Image')" [attr.alt]="pagelet.stringParam('AlternateText')" />
+  <div [ngClass]="pagelet.stringParam('CSSClass')">
+    <img loading="lazy" [src]="pagelet.stringParam('Image')" [attr.alt]="pagelet.stringParam('AlternateText')" />
   </div>
 </ng-template>
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts b/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
@@ -33,7 +33,6 @@ describe('Cms Image Component', () => {
       },
     };
     component.pagelet = createContentPageletView(pagelet);
-    component.showImage = true;
   });
 
   it('should be created', () => {
@@ -42,8 +41,8 @@ describe('Cms Image Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
       <a class="teaser-link" href="http://example.com" title="bar"
-        ><div class="defer-load foo" ng-reflect-ng-class="foo">
-          <img src="http://example.com/foo/bar.png" alt="foo" /></div
+        ><div ng-reflect-ng-class="foo" class="foo">
+          <img loading="lazy" src="http://example.com/foo/bar.png" alt="foo" /></div
       ></a>
     `);
   });

diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.ts b/src/app/shared/cms/components/cms-image/cms-image.component.ts
@@ -14,9 +14,4 @@ export class CMSImageComponent implements CMSComponent {
 
   isRouterLink = ContentViewHelper.isRouterLink;
   routerLink = ContentViewHelper.getRouterLink;
-
-  /**
-   * deferred loading flag
-   */
-  showImage = false;
 }
diff --git a/src/app/shared/cms/components/cms-video/cms-video.component.html b/src/app/shared/cms/components/cms-video/cms-video.component.html
@@ -1,20 +1,18 @@
 <div
   *ngIf="pagelet.hasParam('Video')"
-  (deferLoad)="showVideo = true"
-  class="video-container defer-load"
+  class="video-container"
   [ngClass]="pagelet.stringParam('CSSClass')"
   [ngStyle]="{ 'width.px': videoWidth, 'height.px': videoHeight }"
 >
   <ng-container *ngIf="iframeVideoUrl; else nativeVideo">
-    <div *ngIf="showVideo" class="video-wrapper">
+    <div class="video-wrapper">
       <!-- spell-checker: words allowfullscreen -->
-      <iframe [src]="iframeVideoUrl" frameborder="0" allowfullscreen></iframe>
+      <iframe loading="lazy" [src]="iframeVideoUrl" frameborder="0" allowfullscreen></iframe>
     </div>
   </ng-container>
 
   <ng-template #nativeVideo>
     <video
-      *ngIf="showVideo"
       #videoPlayer
       [src]="nativeVideoUrl"
       class="video"

diff --git a/src/app/shared/cms/components/cms-video/cms-video.component.ts b/src/app/shared/cms/components/cms-video/cms-video.component.ts
@@ -30,11 +30,6 @@ export class CMSVideoComponent implements CMSComponent, OnInit {
 
   constructor(private sanitizer: DomSanitizer) {}
 
-  /**
-   * deferred loading flag
-   */
-  showVideo = false;
-
   ngOnInit() {
     this.video = this.pagelet.stringParam('Video');
     this.autoplay = this.pagelet.booleanParam('Autoplay');

diff --git a/src/app/shared/components/product/product-image/product-image.component.html b/src/app/shared/components/product/product-image/product-image.component.html
@@ -1,4 +1,4 @@
-<div (deferLoad)="showImage$.next()" class="defer-load">
+<div>
   <a
     *ngIf="link; else image"
     data-testing-id="product-image-link"
@@ -10,6 +10,7 @@
 
 <ng-template #image>
   <img
+    loading="lazy"
     *ngIf="{ image: productImage$ | async } as product"
     class="product-image"
     [src]="product.image?.effectiveUrl || '/assets/img/not_available.png'"

diff --git a/src/app/shared/components/product/product-image/product-image.component.spec.ts b/src/app/shared/components/product/product-image/product-image.component.spec.ts
@@ -39,7 +39,6 @@ describe('Product Image Component', () => {
     translate.use('en');
     translate.set('product.image.text.alttext', 'product photo');
 
-    component.showImage$.next();
     component.imageType = 'S';
   });
 
@@ -58,6 +57,7 @@ describe('Product Image Component', () => {
         "alt": "product photo",
         "class": "product-image",
         "itemprop": "image",
+        "loading": "lazy",
         "src": "/assets/img/not_available.png",
       }
     `);
@@ -86,6 +86,7 @@ describe('Product Image Component', () => {
         "data-view": "front",
         "height": "110",
         "itemprop": "image",
+        "loading": "lazy",
         "src": "/assets/product_img/a.jpg",
         "width": "110",
       }

diff --git a/src/app/shared/components/product/product-image/product-image.component.ts b/src/app/shared/components/product/product-image/product-image.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { QueryParamsHandling } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, ReplaySubject, combineLatest, of } from 'rxjs';
+import { Observable, combineLatest, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
@@ -44,19 +44,11 @@ export class ProductImageComponent implements OnInit {
   productImage$: Observable<Image>;
   defaultAltText$: Observable<string>;
 
-  /**
-   * deferred loading flag
-   */
-  showImage$ = new ReplaySubject<void>(1);
-
   constructor(private translateService: TranslateService, private context: ProductContextFacade) {}
 
   ngOnInit() {
     this.productURL$ = this.context.select('productURL');
-    this.productImage$ = combineLatest([
-      this.context.getProductImage$(this.imageType, this.imageView),
-      this.showImage$,
-    ]).pipe(map(([i]) => i));
+    this.productImage$ = this.context.getProductImage$(this.imageType, this.imageView);
 
     this.defaultAltText$ = combineLatest([
       this.context.select('product').pipe(map(product => product?.name || product?.sku || '')),

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -11,7 +11,6 @@ import {
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
-import { DeferLoadModule } from '@trademe/ng-defer-load';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { SwiperModule } from 'swiper/angular';
 
@@ -146,7 +145,6 @@ const importExportModules = [
   CommonModule,
   CompareExportsModule,
   ContactUsExportsModule,
-  DeferLoadModule,
   DirectivesModule,
   FeatureToggleModule,
   FormlyAddressFormsModule,

diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
@@ -239,7 +239,3 @@ img.marketing {
     margin-bottom: 0;
   }
 }
-
-.defer-load {
-  min-height: 1px;
-}