refactor(module:core): cleanup animation frame polyfill (#9243)

The `reqAnimFrame` polyfill was originally designed for legacy browser support, but it is now unnecessary, particularly in Angular, which targets only evergreen browsers.

BREAKING CHANGE:
- refactoring in `ng-zorro-antd/core/polyfill`:
  - rename `cancelRequestAnimationFrame` to `cancelAnimationFrame`
  - rename `reqAnimFrame` to `requestAnimationFrame`

Author: arturovt

components/core/polyfill/request-animation.ts

@@ -3,56 +3,12 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NzSafeAny } from 'ng-zorro-antd/core/types';
-
-const availablePrefixes = ['moz', 'ms', 'webkit'];
-
-function requestAnimationFramePolyfill(): typeof requestAnimationFrame {
-  let lastTime = 0;
-  return function (callback: FrameRequestCallback): number {
-    const currTime = new Date().getTime();
-    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
-    const id = window.setTimeout(() => {
-      callback(currTime + timeToCall);
-    }, timeToCall);
-    lastTime = currTime + timeToCall;
-    return id;
-  };
-}
-
-function getRequestAnimationFrame(): typeof requestAnimationFrame {
-  if (typeof window === 'undefined') {
-    return () => 0;
-  }
-  if (window.requestAnimationFrame) {
-    // https://github.com/vuejs/vue/issues/4465
-    return window.requestAnimationFrame.bind(window);
-  }
-
-  const prefix = availablePrefixes.filter(key => `${key}RequestAnimationFrame` in window)[0];
-
-  return prefix ? (window as NzSafeAny)[`${prefix}RequestAnimationFrame`] : requestAnimationFramePolyfill();
-}
-
-export function cancelRequestAnimationFrame(id: number): NzSafeAny {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-  if (window.cancelAnimationFrame) {
-    return window.cancelAnimationFrame(id);
-  }
-  const prefix = availablePrefixes.filter(
-    key => `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window
-  )[0];
-
-  return prefix
-    ? (
-        ((window as NzSafeAny)[`${prefix}CancelAnimationFrame`] as typeof cancelAnimationFrame) ||
-        ((window as NzSafeAny)[`${prefix}CancelRequestAnimationFrame`] as typeof cancelRequestAnimationFrame)
-      )
-        // @ts-ignore
-        .call(this, id)
-    : clearTimeout(id);
-}
-
-export const reqAnimFrame = getRequestAnimationFrame();
+// Note: This falls back to `setTimeout` if `requestAnimationFrame` is
+// unintentionally called on the server, but ideally, we should never attempt
+// to call `requestAnimationFrame` on the server — all invocations should be
+// wrapped with isBrowser.
+export const requestAnimationFrame =
+  typeof globalThis.requestAnimationFrame === 'function' ? globalThis.requestAnimationFrame : globalThis.setTimeout;
+
+export const cancelAnimationFrame =
+  typeof globalThis.requestAnimationFrame === 'function' ? globalThis.cancelAnimationFrame : globalThis.clearTimeout;

components/core/services/scroll.ts

@@ -5,7 +5,7 @@
 
 import { DOCUMENT, inject, Injectable, NgZone } from '@angular/core';
 
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 export type EasyingFn = (t: number, b: number, c: number, d: number) => number;
@@ -122,7 +122,7 @@ export class NzScrollService {
         (target as HTMLElement).scrollTop = nextScrollTop;
       }
       if (time < duration) {
-        reqAnimFrame(frameFunc);
+        requestAnimationFrame(frameFunc);
       } else if (typeof callback === 'function') {
         // Caretaker note: the `frameFunc` is called within the `<root>` zone, but we have to re-enter
         // the Angular zone when calling custom callback to be backwards-compatible.
@@ -131,6 +131,6 @@ export class NzScrollService {
     };
     // Caretaker note: the `requestAnimationFrame` triggers change detection, but updating a `scrollTop` property or
     // calling `window.scrollTo` doesn't require Angular to run `ApplicationRef.tick()`.
-    this.ngZone.runOutsideAngular(() => reqAnimFrame(frameFunc));
+    this.ngZone.runOutsideAngular(() => requestAnimationFrame(frameFunc));
   }
 }

components/graph/core/minimap.ts

@@ -9,7 +9,7 @@ import { drag } from 'd3-drag';
 import { pointer, select } from 'd3-selection';
 import { ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3-zoom';
 
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzZoomTransform } from '../interface';
@@ -178,7 +178,7 @@ export class Minimap {
     if (this.translate != null && this.zoom != null) {
       // Update the viewpoint rectangle shape since the aspect ratio of the
       // map has changed.
-      this.ngZone.runOutsideAngular(() => reqAnimFrame(() => this.zoom()));
+      this.ngZone.runOutsideAngular(() => requestAnimationFrame(() => this.zoom()));
     }
 
     // Serialize the main svg to a string which will be used as the rendering
@@ -202,7 +202,7 @@ export class Minimap {
       context!.drawImage(image, minimapOffset.x, minimapOffset.y, this.minimapSize.width, this.minimapSize.height);
 
       this.ngZone.runOutsideAngular(() => {
-        reqAnimFrame(() => {
+        requestAnimationFrame(() => {
           // Hide the old canvas and show the new buffer canvas.
           select(this.canvasBuffer).style('display', 'block');
           select(this.canvas).style('display', 'none');

components/graph/graph.component.ts

@@ -33,7 +33,7 @@ import { finalize, take } from 'rxjs/operators';
 import { buildGraph } from 'dagre-compound';
 
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
-import { cancelRequestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
+import { cancelAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { calculateTransform } from './core/utils';
@@ -199,7 +199,7 @@ export class NzGraphComponent implements OnInit, OnChanges, AfterContentChecked,
         this._dataSubscription.unsubscribe();
         this._dataSubscription = null;
       }
-      cancelRequestAnimationFrame(this.requestId);
+      cancelAnimationFrame(this.requestId);
     });
   }
 

components/modal/modal-container.directive.ts

@@ -25,7 +25,7 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { NzConfigService } from 'ng-zorro-antd/core/config';
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { fromEventOutsideAngular, getElementOffset, isNotNil } from 'ng-zorro-antd/core/util';
 
@@ -162,7 +162,7 @@ export class BaseModalContainerComponent extends BasePortalOutlet {
     if (this.document) {
       this.elementFocusedBeforeModalWasOpened = this.document.activeElement as HTMLElement;
       if (this.host.nativeElement.focus) {
-        this.ngZone.runOutsideAngular(() => reqAnimFrame(() => this.host.nativeElement.focus()));
+        this.ngZone.runOutsideAngular(() => requestAnimationFrame(() => this.host.nativeElement.focus()));
       }
     }
   }

components/select/select-search.component.ts

@@ -21,7 +21,7 @@ import {
 } from '@angular/core';
 import { COMPOSITION_BUFFER_MODE, FormsModule } from '@angular/forms';
 
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 
 @Component({
   selector: 'nz-select-search',
@@ -85,7 +85,7 @@ export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
   }
 
   syncMirrorWidth(): void {
-    reqAnimFrame(() => {
+    requestAnimationFrame(() => {
       const mirrorDOM = this.mirrorElement!.nativeElement;
       const hostDOM = this.elementRef.nativeElement;
       const inputDOM = this.inputElement.nativeElement;

components/select/select.component.ts

@@ -50,7 +50,7 @@ import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/con
 import { NzFormItemFeedbackIconComponent, NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzOverlayModule, POSITION_MAP, POSITION_TYPE, getPlacementName } from 'ng-zorro-antd/core/overlay';
-import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { cancelAnimationFrame, requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import {
   NgClassInterface,
   NzSafeAny,
@@ -607,8 +607,8 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   updateCdkConnectedOverlayStatus(): void {
     if (this.platform.isBrowser && this.originElement.nativeElement) {
       const triggerWidth = this.triggerWidth;
-      cancelRequestAnimationFrame(this.requestId);
-      this.requestId = reqAnimFrame(() => {
+      cancelAnimationFrame(this.requestId);
+      this.requestId = requestAnimationFrame(() => {
         // Blink triggers style and layout pipelines anytime the `getBoundingClientRect()` is called, which may cause a
         // frame drop. That's why it's scheduled through the `requestAnimationFrame` to unload the composite thread.
         this.triggerWidth = this.originElement.nativeElement.getBoundingClientRect().width;
@@ -623,7 +623,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   }
 
   updateCdkConnectedOverlayPositions(): void {
-    reqAnimFrame(() => {
+    requestAnimationFrame(() => {
       this.cdkConnectedOverlay?.overlayRef?.updatePosition();
     });
   }
@@ -634,7 +634,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
 
   constructor() {
     this.destroyRef.onDestroy(() => {
-      cancelRequestAnimationFrame(this.requestId);
+      cancelAnimationFrame(this.requestId);
       this.focusMonitor.stopMonitoring(this.host);
     });
   }

components/tabs/tab-nav-bar.component.ts

@@ -38,7 +38,7 @@ import { animationFrameScheduler, asapScheduler, merge, of } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzTabPositionMode, NzTabScrollEvent, NzTabScrollListOffsetEvent } from './interfaces';
@@ -229,7 +229,7 @@ export class NzTabNavBarComponent implements AfterViewInit, AfterContentChecked,
       .withWrap();
     this.keyManager.updateActiveItem(this.selectedIndex);
 
-    reqAnimFrame(realign);
+    requestAnimationFrame(realign);
 
     merge(this.nzResizeObserver.observe(this.navWrapRef), this.nzResizeObserver.observe(this.navListRef))
       .pipe(takeUntilDestroyed(this.destroyRef), auditTime(16, RESIZE_SCHEDULER))

components/tabs/tabs-ink-bar.directive.ts

@@ -6,7 +6,7 @@
 import { Directive, ElementRef, Input, NgZone, inject } from '@angular/core';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 
 import { NzTabPositionMode } from './interfaces';
 
@@ -31,7 +31,7 @@ export class NzTabsInkBarDirective {
 
   alignToElement(element: HTMLElement): void {
     this.ngZone.runOutsideAngular(() => {
-      reqAnimFrame(() => this.setStyles(element));
+      requestAnimationFrame(() => this.setStyles(element));
     });
   }
 

components/time-picker/time-picker-panel.component.ts

@@ -30,7 +30,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
-import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
 import { fromEventOutsideAngular, isNotNil } from 'ng-zorro-antd/core/util';
 import { DateHelperService, NzI18nModule } from 'ng-zorro-antd/i18n';
 
@@ -465,7 +465,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
     const perTick = (difference / duration) * 10;
 
     this.ngZone.runOutsideAngular(() => {
-      reqAnimFrame(() => {
+      requestAnimationFrame(() => {
         element.scrollTop = element.scrollTop + perTick;
         if (element.scrollTop === to) {
           return;