perf(tabs): render tab navbar at same time of tab content

Author: adamdbradley

ionic/components/navbar/navbar.ts

@@ -106,6 +106,7 @@ class ToolbarBackground {
     '</div>',
   host: {
     '[hidden]': '_hidden',
+    '[class.show-tab-navbar]': '_showNavbar',
     'class': 'toolbar'
   },
   directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
@@ -117,6 +118,7 @@ export class Navbar extends ToolbarBase {
   private _bbRef: ElementRef;
   private _bbtRef: ElementRef;
   private _bgRef: ElementRef;
+  private _showNavbar: boolean;
 
   /**
    * @private
@@ -211,8 +213,14 @@ export class Navbar extends ToolbarBase {
   /**
    * @private
    */
-  setHidden(isHidden) {
-    this._hidden = isHidden
+  setHidden(isHidden: boolean) {
+    // used to display none/block the navbar
+    this._hidden = isHidden;
+
+    // on the very first load, the navbar may load quicker than
+    // the tab content, which looks weird. This makes sure that
+    // the tab's navbar doesn't show before the tab has fully loaded
+    this._showNavbar = !isHidden;
   }
 
 }

ionic/components/tabs/tab.ts

@@ -184,6 +184,7 @@ export class Tab extends NavController {
   preload(wait) {
     this._loadTimer = setTimeout(() => {
       if (!this._loaded) {
+        console.debug('Tabs, preload', this.id);
         this.load({
           animate: false,
           preload: true,

ionic/components/tabs/tabs.scss

@@ -38,6 +38,16 @@ ion-tabs > ion-navbar-section {
   order: $flex-order-tabbar-navbar;
 }
 
+ion-tabs > ion-navbar-section ion-navbar.toolbar.show-navbar {
+  // by default, do not show tab navbars when they render
+  opacity: 0;
+}
+
+ion-tabs > ion-navbar-section ion-navbar.toolbar.show-navbar.show-tab-navbar {
+  // only when the tab content has loaded should it be rendered
+  opacity: 1;
+}
+
 ion-tabbar-section {
   position: relative;
   order: $flex-order-tabbar-bottom;

ionic/components/tabs/tabs.ts

@@ -12,7 +12,7 @@ import {NavController} from '../nav/nav-controller';
 import {ViewController} from '../nav/view-controller';
 import {Icon} from '../icon/icon';
 import {rafFrames} from '../../util/dom';
-import {isUndefined} from '../../util/util';
+import {isUndefined, isTrueProperty} from '../../util/util';
 
 
 /**
@@ -69,6 +69,7 @@ import {isUndefined} from '../../util/util';
 })
 export class Tabs extends Ion {
   private _ids: number = -1;
+  private _preloadTabs: boolean = null;
   private _tabs: Array<Tab> = [];
   private _onReady = null;
   private _useHighlight: boolean;
@@ -150,11 +151,8 @@ export class Tabs extends Ion {
    * @private
    */
   ngAfterViewInit() {
-    this.preloadTabs = (this.preloadTabs !== "false" && this.preloadTabs !== false);
-
     this._setConfig('tabbarPlacement', 'bottom');
     this._setConfig('tabbarIcons', 'top');
-    this._setConfig('preloadTabs', false);
 
     if (this._useHighlight) {
       this._platform.onResize(() => {
@@ -167,14 +165,18 @@ export class Tabs extends Ion {
         this.select(tab);
       });
     });
+  }
 
+  ngAfterContentInit() {
     let selectedIndex = this.selectedIndex ? parseInt(this.selectedIndex, 10) : 0;
 
+    let preloadTabs = (isUndefined(this.preloadTabs) ? this._config.getBoolean('preloadTabs') : isTrueProperty(this.preloadTabs));
+
     this._tabs.forEach((tab, index) => {
       if (index === selectedIndex) {
         this.select(tab);
 
-      } else if (this.preloadTabs) {
+      } else if (preloadTabs) {
         tab.preload(1000 * index);
       }
     });
@@ -215,7 +217,7 @@ export class Tabs extends Ion {
       return this._touchActive(selectedTab);
     }
 
-    console.time('Tabs#select ' + selectedTab.id);
+    console.debug('Tabs, select', selectedTab.id);
 
     let opts = {
       animate: false
@@ -257,7 +259,6 @@ export class Tabs extends Ion {
         this._onReady = null;
       }
 
-      console.time('Tabs#select ' + selectedTab.id);
     });
   }