perf: do not run change detection on resize events

src/app/pdf-viewer/pdf-viewer.component.ts

@@ -10,13 +10,13 @@ import {
   OnChanges,
   SimpleChanges,
   OnInit,
-  HostListener,
   OnDestroy,
   ViewChild,
-  AfterViewChecked
+  AfterViewChecked,
+  NgZone
 } from '@angular/core';
 import { from, fromEvent, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import * as PDFJS from 'pdfjs-dist';
 import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer';
 
@@ -216,7 +216,7 @@ export class PdfViewerComponent
     return null;
   }
 
-  constructor(private element: ElementRef) {
+  constructor(private element: ElementRef<HTMLElement>, private ngZone: NgZone) {
     if (isSSR()) {
       return;
     }
@@ -253,18 +253,15 @@ export class PdfViewerComponent
       this.isVisible = true;
 
       setTimeout(() => {
-        this.ngOnInit();
+        this.initialize();
         this.ngOnChanges({ src: this.src } as any);
       });
     }
   }
 
   ngOnInit() {
-    if (!isSSR() && this.isVisible) {
-      this.isInitialized = true;
-      this.setupMultiPageViewer();
-      this.setupSinglePageViewer();
-    }
+    this.initialize();
+    this.setupResizeListener();
   }
 
   ngOnDestroy() {
@@ -273,21 +270,6 @@ export class PdfViewerComponent
     this.loadingTask = null;
   }
 
-  @HostListener('window:resize', [])
-  public onPageResize() {
-    if (!this._canAutoResize || !this._pdf) {
-      return;
-    }
-
-    if (this.resizeTimeout) {
-      clearTimeout(this.resizeTimeout);
-    }
-
-    this.resizeTimeout = window.setTimeout(() => {
-      this.updateSize();
-    }, 100);
-  }
-
   get pdfLinkService(): any {
     return this._showAll
       ? this.pdfMultiPageLinkService
@@ -674,4 +656,32 @@ export class PdfViewerComponent
       this.pdfSinglePageLinkService.setDocument(this._pdf, null);
     }
   }
+
+  private initialize(): void {
+    if (isSSR() || !this.isVisible) {
+      return;
+    }
+
+    this.isInitialized = true;
+    this.setupMultiPageViewer();
+    this.setupSinglePageViewer();
+  }
+
+  private setupResizeListener(): void {
+    if (isSSR()) {
+      return;
+    }
+
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent(window, 'resize')
+        .pipe(
+          debounceTime(100),
+          filter(() => this._canAutoResize && !!this._pdf),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => {
+          this.updateSize();
+        });
+    });
+  }
 }