perf(reorder): reorder icon is display: none by default

references #7651

Author: manucorporat

src/components/item/item-reorder.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 ion-reorder {
-  display: flex;
+  display: none;
 
   flex: 1;
   align-items: center;
@@ -28,10 +28,12 @@ ion-reorder {
   }
 }
 
-.reorder-enabled {
-  ion-reorder {
-    transform: translate3d(0, 0, 0);
-  }
+.reorder-enabled ion-reorder {
+  display: flex;
+}
+
+.reorder-visible ion-reorder {
+  transform: translate3d(0, 0, 0);
 }
 
 .reorder-list-active {

src/components/item/item-reorder.ts

@@ -1,7 +1,7 @@
 import { Component, Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Renderer, Inject, Optional, Output } from '@angular/core';
 
 import { Content } from '../content/content';
-import { CSS } from '../../util/dom';
+import { CSS, zoneRafFrames } from '../../util/dom';
 import { Item } from './item';
 import { ItemReorderGesture } from '../item/item-reorder-gesture';
 import { isTrueProperty } from '../../util/util';
@@ -128,10 +128,13 @@ export interface ReorderIndexes {
   selector: 'ion-list[reorder],ion-item-group[reorder]',
   host: {
     '[class.reorder-enabled]': '_enableReorder',
+    '[class.reorder-visible]': '_visibleReorder',
+
   }
 })
 export class ItemReorder {
   private _enableReorder: boolean = false;
+  private _visibleReorder: boolean = false;
   private _reorderGesture: ItemReorderGesture;
   private _lastToIndex: number = -1;
   private _element: HTMLElement;
@@ -166,15 +169,21 @@ export class ItemReorder {
     return this._enableReorder;
   }
   set reorder(val: boolean) {
-    this._enableReorder = isTrueProperty(val);
+    let enabled = isTrueProperty(val);
 
-    if (!this._enableReorder) {
-      this._reorderGesture && this._reorderGesture.destroy();
+    if (!enabled && this._reorderGesture) {
+      this._reorderGesture.destroy();
       this._reorderGesture = null;
 
-    } else if (!this._reorderGesture) {
+      this._visibleReorder = false;
+      setTimeout(() => this._enableReorder = false, 400);
+
+    } else if (enabled && !this._reorderGesture) {
       console.debug('enableReorderItems');
       this._reorderGesture = new ItemReorderGesture(this);
+
+      this._enableReorder = true;
+      zoneRafFrames(2, () => this._visibleReorder = true);
     }
   }
 

src/util/dom.ts

@@ -49,6 +49,20 @@ export function rafFrames(framesToWait: number, callback: Function) {
   }
 }
 
+// TODO: DRY rafFrames and zoneRafFrames
+export function zoneRafFrames(framesToWait: number, callback: Function) {
+  framesToWait = Math.ceil(framesToWait);
+
+  if (framesToWait < 2) {
+    raf(callback);
+
+  } else {
+    setTimeout(() => {
+      raf(callback);
+    }, (framesToWait - 1) * 16.6667);
+  }
+}
+
 export let CSS: {
   transform?: string,
   transition?: string,

src/util/keyboard.ts

@@ -2,7 +2,7 @@ import { Injectable, NgZone } from '@angular/core';
 
 import { Config } from '../config/config';
 import { Form } from './form';
-import { hasFocusedTextInput, nativeRaf, rafFrames, nativeTimeout } from './dom';
+import { hasFocusedTextInput, nativeRaf, zoneRafFrames, nativeTimeout } from './dom';
 import { Key } from './key';
 
 /**
@@ -86,11 +86,9 @@ export class Keyboard {
     function checkKeyboard() {
       console.debug('keyboard isOpen', self.isOpen());
       if (!self.isOpen() || checks > pollingChecksMax) {
-        rafFrames(30, () => {
-          self._zone.run(() => {
-            console.debug('keyboard closed');
-            callback();
-          });
+        zoneRafFrames(30, () => {
+          console.debug('keyboard closed');
+          callback();
         });
 
       } else {