perf(ripple-effect): using requestIdleCallback

core/src/components/ripple-effect/ripple-effect.tsx

@@ -14,7 +14,7 @@ export class RippleEffect {
 
   @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
-  @Prop({ context: 'document' }) doc!: Document;
+  @Prop({ context: 'window' }) win!: Window;
 
   @Prop() parent?: HTMLElement | string = 'parent';
 
@@ -56,6 +56,15 @@ export class RippleEffect {
    */
   @Method()
   addRipple(pageX: number, pageY: number) {
+    let rIC = (this.win as any).requestIdleCallback;
+    if (!rIC) {
+      rIC = window.requestAnimationFrame;
+    }
+
+    rIC(() => this.prepareRipple(pageX, pageY));
+  }
+
+  private prepareRipple(pageX: number, pageY: number) {
     let x: number;
     let y: number;
     let size: number;
@@ -65,29 +74,24 @@ export class RippleEffect {
       const width = rect.width;
       const height = rect.height;
       size = Math.min(Math.sqrt(width * width + height * height) * 2, MAX_RIPPLE_DIAMETER);
-      x = pageX - rect.left - (size / 2);
-      y = pageY - rect.top - (size / 2);
+      x = pageX - rect.left - (size * 0.5);
+      y = pageY - rect.top - (size * 0.5);
     });
     this.queue.write(() => {
-      const div = this.doc.createElement('div');
+      const div = this.win.document.createElement('div');
       div.classList.add('ripple-effect');
       const style = div.style;
       const duration = Math.max(RIPPLE_FACTOR * Math.sqrt(size), MIN_RIPPLE_DURATION);
       style.top = y + 'px';
       style.left = x + 'px';
-      style.width = size + 'px';
-      style.height = size + 'px';
+      style.width = style.height = size + 'px';
       style.animationDuration = duration + 'ms';
 
       const container = this.el.shadowRoot || this.el;
       container.appendChild(div);
       setTimeout(() => div.remove(), duration + 50);
     });
   }
-
-  render() {
-    return null;
-  }
 }
 
 const RIPPLE_FACTOR = 35;