fix: 🐛 use animation frame

ngneat · Nov 11, 2020 · d1cb240 · d1cb240
1 parent 71d8c84
commit d1cb240
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/ngneat/helipopper/src/lib/helipopper.directive.ts b/projects/ngneat/helipopper/src/lib/helipopper.directive.ts
@@ -14,7 +14,7 @@ import {
   Type
 } from '@angular/core';
 import tippy, { Instance, Props } from 'tippy.js';
-import { forkJoin, fromEvent, Subject } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
 import { Options as PopperOptions } from '@popperjs/core';
 import {
   addClass,
@@ -24,8 +24,7 @@ import {
   dimensionsChanges,
   inView,
   isString,
-  TemplatePortal,
-  zoneStable
+  TemplatePortal
 } from './utils';
 import { takeUntil } from 'rxjs/operators';
 import { HELIPOPPER_CONFIG, HelipopperConfig, InstanceWithClose, Variation } from './helipopper.types';
@@ -111,9 +110,11 @@ export class HelipopperDirective implements OnDestroy {
     if (this.instance) {
       this.checkOverflow();
     } else {
-      forkJoin([inView(this.host.nativeElement), zoneStable(this.zone)])
-        .pipe(takeUntil(this._destroy))
-        .subscribe(() => this.create());
+      requestAnimationFrame(() => {
+        inView(this.host.nativeElement)
+          .pipe(takeUntil(this._destroy))
+          .subscribe(() => this.create());
+      });
     }
   }
 
@@ -308,7 +309,7 @@ export class HelipopperDirective implements OnDestroy {
 
   private checkOverflow() {
     if (this.showOnlyOnTextOverflow) {
-      zoneStable(this.zone).subscribe(() => this.markDisabled(this.isElementOverflow() === false));
+      requestAnimationFrame(() => this.markDisabled(this.isElementOverflow() === false));
     }
   }
 

diff --git a/projects/ngneat/helipopper/src/lib/utils.ts b/projects/ngneat/helipopper/src/lib/utils.ts
@@ -1,6 +1,6 @@
 import { fromEvent, Observable } from 'rxjs';
 import { auditTime, distinctUntilChanged, map, take } from 'rxjs/operators';
-import { ElementRef, EmbeddedViewRef, NgZone, TemplateRef } from '@angular/core';
+import { ElementRef, EmbeddedViewRef, TemplateRef } from '@angular/core';
 
 const hasSupport = 'IntersectionObserver' in window;
 
@@ -120,10 +120,6 @@ export function coerceElement<T>(elementOrRef: ElementRef<T> | T): T {
   return elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
 }
 
-export function zoneStable(zone: NgZone) {
-  return zone.onStable.pipe(take(1));
-}
-
 export function isString(value: any): value is string {
   return typeof value === 'string';
 }