From 7292fc7d387d83379aedf93558451bfa254acb6f Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Sun, 29 Jul 2018 16:04:51 +0200
Subject: [PATCH] perf(icon): disable icon lazy loading when it's not needed

---
 .../src/components/action-sheet/action-sheet.tsx | 16 +++++++---------
 core/src/components/back-button/back-button.tsx  |  2 +-
 core/src/components/fab-button/fab-button.tsx    |  2 +-
 core/src/components/item/item.tsx                |  2 +-
 .../refresher-content/refresher-content.tsx      |  2 +-
 core/src/components/reorder/reorder.tsx          |  2 +-
 core/src/components/searchbar/searchbar.tsx      |  6 +++---
 core/src/components/tab-button/tab-button.tsx    |  2 +-
 core/src/components/tabbar/tabbar.tsx            |  4 ++--
 9 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 91b2f66e603..82f51334886 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -240,9 +240,7 @@ export class ActionSheet implements OverlayInterface {
             {buttons.map(b =>
               <button class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                 <span class="action-sheet-button-inner">
-                  {b.icon
-                    ? <ion-icon icon={b.icon} class="action-sheet-icon" />
-                    : null}
+                  {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                   {b.text}
                 </span>
               </button>
@@ -255,12 +253,12 @@ export class ActionSheet implements OverlayInterface {
                   onClick={() => this.buttonClick(cancelButton)}
                 >
                   <span class="action-sheet-button-inner">
-                    {cancelButton.icon
-                      ? <ion-icon
-                          icon={cancelButton.icon}
-                          class="action-sheet-icon"
-                        />
-                      : null}
+                    {cancelButton.icon &&
+                      <ion-icon
+                        icon={cancelButton.icon}
+                        lazy={false}
+                        class="action-sheet-icon"
+                      />}
                     {cancelButton.text}
                   </span>
                 </button>
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index abf554ae8c0..0a96b31f11c 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -80,7 +80,7 @@ export class BackButton {
         class="back-button-native"
         onClick={(ev) => this.onClick(ev)}>
         <span class="back-button-inner">
-          { backButtonIcon && <ion-icon icon={backButtonIcon}/> }
+          { backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}/> }
           { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
           { this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
         </span>
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 7756ce591c5..0407881c78e 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -94,7 +94,7 @@ export class FabButton {
         disabled={this.disabled}
         href={this.href}>
         <span class="fab-button-close-icon">
-          <ion-icon name="close"></ion-icon>
+          <ion-icon name="close" lazy={false}></ion-icon>
         </span>
         <span class="fab-button-inner">
           <slot></slot>
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 84d4eb54c49..81fd2239462 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -158,7 +158,7 @@ export class Item {
             <slot></slot>
           </div>
           <slot name="end"></slot>
-          { showDetail && <ion-icon icon={detailIcon} class="item-detail-icon"></ion-icon> }
+          { showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon"></ion-icon> }
         </div>
         { state && <div class="item-state"></div> }
         { clickable && mode === 'md' && <ion-ripple-effect tapClick={true} parent={el} /> }
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 88445b306ce..d942b8dc421 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -43,7 +43,7 @@ export class RefresherContent {
       <div class="refresher-pulling">
         {this.pullingIcon &&
           <div class="refresher-pulling-icon">
-            <ion-icon icon={this.pullingIcon}></ion-icon>
+            <ion-icon icon={this.pullingIcon} lazy={false}></ion-icon>
           </div>
         }
         {this.pullingText &&
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index 3807f74c7c5..501ef2865cd 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -16,7 +16,7 @@ export class Reorder {
   render() {
     return (
       <slot>
-        <ion-icon class="reorder-icon" name="reorder"/>
+        <ion-icon name="reorder" lazy={false} class="reorder-icon" />
       </slot>
     );
   }
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 5d7ae169fe0..9f55a49e070 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -331,7 +331,7 @@ export class Searchbar {
         onClick={this.cancelSearchbar.bind(this)}
         class="searchbar-cancel-button">
           { this.mode === 'md'
-            ? <ion-icon mode={this.mode} icon={this.cancelButtonIcon}></ion-icon>
+            ? <ion-icon mode={this.mode} icon={this.cancelButtonIcon} lazy={false}></ion-icon>
             : this.cancelButtonText }
       </button>
       : null;
@@ -339,7 +339,7 @@ export class Searchbar {
     return [
       <div class="searchbar-input-container">
         { this.mode === 'md' && cancelButton }
-        <ion-icon mode={this.mode} icon={searchIcon} class="searchbar-search-icon"></ion-icon>
+        <ion-icon mode={this.mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon>
         <input
           ref={(el) => this.nativeInput = el as HTMLInputElement}
           class="searchbar-input"
@@ -360,7 +360,7 @@ export class Searchbar {
           onClick={this.clearInput.bind(this)}
           onMouseDown={this.clearInput.bind(this)}
           onTouchStart={this.clearInput.bind(this)}>
-            <ion-icon mode={this.mode} icon={clearIcon} class="searchbar-clear-icon"></ion-icon>
+            <ion-icon mode={this.mode} icon={clearIcon} lazy={false} class="searchbar-clear-icon"></ion-icon>
         </button>
       </div>,
       this.mode === 'ios' && cancelButton
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 28d5050aa5c..4a854b2e773 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -72,7 +72,7 @@ export class TabButton {
         class="tab-button-native"
         onKeyUp={this.onKeyUp.bind(this)}
         onBlur={this.onBlur.bind(this)}>
-        { icon && <ion-icon class="tab-button-icon" icon={icon}></ion-icon> }
+        { icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
         { label && <span class="tab-button-text">{label}</span> }
         { badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
         { mode === 'md' && <ion-ripple-effect tapClick={true}/> }
diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx
index b0ec2e9af11..07842c3b33f 100644
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@@ -225,7 +225,7 @@ export class Tabbar {
     if (this.scrollable) {
       return [
         <ion-button onClick={() => this.scrollByTab('left')} fill="clear" class={{ inactive: !this.canScrollLeft }}>
-          <ion-icon name="arrow-dropleft"/>
+          <ion-icon name="arrow-dropleft" lazy={false}/>
         </ion-button>,
 
         <ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}>
@@ -234,7 +234,7 @@ export class Tabbar {
         </ion-scroll>,
 
         <ion-button onClick={() => this.scrollByTab('right')} fill="clear" class={{ inactive: !this.canScrollRight }}>
-          <ion-icon name="arrow-dropright"/>
+          <ion-icon name="arrow-dropright" lazy={false}/>
         </ion-button>
       ];
     } else {