perf(icon): disable icon lazy loading when it's not needed

ionic-team · Jul 29, 2018 · 7292fc7 · 7292fc7
1 parent b73bbff
commit 7292fc7
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -331,15 +331,15 @@ 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;
 
     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
@@ -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
@@ -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 {