From 26441ecfe35497d8ba3762806ca9700ecf822153 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Sat, 20 Aug 2016 15:53:02 +0200
Subject: [PATCH] perf(reorder): reorder icon is display: none by default

references #7651
---
 src/components/item/item-reorder.scss | 12 +++++++-----
 src/components/item/item-reorder.ts   | 19 ++++++++++++++-----
 src/util/dom.ts                       | 14 ++++++++++++++
 src/util/keyboard.ts                  | 10 ++++------
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss
index 2497d7f36b0..9aa4d058158 100644
--- a/src/components/item/item-reorder.scss
+++ b/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 {
diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index f76997cd55b..3aeb90c81ec 100644
--- a/src/components/item/item-reorder.ts
+++ b/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);
     }
   }
 
diff --git a/src/util/dom.ts b/src/util/dom.ts
index 9a97f5cd504..11b5b174e27 100644
--- a/src/util/dom.ts
+++ b/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,
diff --git a/src/util/keyboard.ts b/src/util/keyboard.ts
index a3da2f61722..04f67aeb498 100644
--- a/src/util/keyboard.ts
+++ b/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 {