perf(click): lazily initialise all click handlers

Fixes #942

Author: mattlewis92

projects/angular-calendar/src/modules/common/click.directive.ts

@@ -9,16 +9,24 @@ import {
   Inject
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Observable, Subject } from 'rxjs';
+import { requestIdleCallbackObservable } from './request-idle-callback';
+import { switchMapTo, takeUntil } from 'rxjs/operators';
 
 const clickElements = new Set<HTMLElement>();
 
+const eventName: string =
+  typeof window !== 'undefined' && typeof window['Hammer'] !== 'undefined'
+    ? 'tap'
+    : 'click';
+
 @Directive({
   selector: '[mwlClick]'
 })
 export class ClickDirective implements OnInit, OnDestroy {
   @Output('mwlClick') click = new EventEmitter<MouseEvent>(); // tslint:disable-line
 
-  private removeListener: () => void;
+  private destroy$ = new Subject();
 
   constructor(
     private renderer: Renderer2,
@@ -33,16 +41,16 @@ export class ClickDirective implements OnInit, OnDestroy {
       'true'
     );
     clickElements.add(this.elm.nativeElement);
-    const eventName: string =
-      typeof window !== 'undefined' && typeof window['Hammer'] !== 'undefined'
-        ? 'tap'
-        : 'click';
-    this.removeListener = this.renderer.listen(
-      this.elm.nativeElement,
-      eventName,
-      event => {
+
+    // issue #942 - lazily initialise all click handlers after initial render as hammerjs is slow
+    requestIdleCallbackObservable()
+      .pipe(
+        switchMapTo(this.listen()),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(event => {
         // prevent child click events from firing on parent elements that also have click events
-        let nearestClickableParent: HTMLElement = event.target;
+        let nearestClickableParent = event.target as HTMLElement;
         while (
           !clickElements.has(nearestClickableParent) &&
           nearestClickableParent !== this.document.body
@@ -54,12 +62,19 @@ export class ClickDirective implements OnInit, OnDestroy {
         if (isThisClickableElement) {
           this.click.next(event);
         }
-      }
-    );
+      });
   }
 
   ngOnDestroy(): void {
-    this.removeListener();
+    this.destroy$.next();
     clickElements.delete(this.elm.nativeElement);
   }
+
+  private listen() {
+    return new Observable<MouseEvent>(observer => {
+      return this.renderer.listen(this.elm.nativeElement, eventName, event => {
+        observer.next(event);
+      });
+    });
+  }
 }

projects/angular-calendar/src/modules/common/request-idle-callback.ts

@@ -0,0 +1,28 @@
+import { Observable } from 'rxjs';
+
+const isSupported =
+  typeof window !== 'undefined' &&
+  typeof window['requestIdleCallback'] !== 'undefined';
+
+export function requestIdleCallbackObservable() {
+  return new Observable(observer => {
+    /* istanbul ignore else  */
+    if (isSupported) {
+      const id = window['requestIdleCallback'](() => {
+        observer.next();
+        observer.complete();
+      });
+      return () => {
+        window['cancelIdleCallback'](id);
+      };
+    } else {
+      const timeoutId = setTimeout(() => {
+        observer.next();
+        observer.complete();
+      }, 1);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  });
+}

projects/angular-calendar/test/entry.ts

@@ -23,12 +23,17 @@ import * as sinon from 'sinon';
 use(sinonChai);
 
 let rafStub: sinon.SinonStub;
+let requestIdleCallbackStub: sinon.SinonStub;
 beforeEach(() => {
   rafStub = sinon.stub(window, 'requestAnimationFrame').callsArg(0);
+  requestIdleCallbackStub = sinon
+    .stub(window, 'requestIdleCallback' as any)
+    .callsArg(0);
 });
 
 afterEach(() => {
   rafStub.restore();
+  requestIdleCallbackStub.restore();
 });
 
 // First, initialize the Angular testing environment.