MOBILE-2309 core: Don't initialize core-tab content until it's selected

src/components/loading/loading.ts

@@ -26,6 +26,14 @@ import { TranslateService } from '@ngx-translate/core';
  * <core-loading [message]="loadingMessage" [hideUntil]="dataLoaded">
  *     <!-- CONTENT TO HIDE UNTIL LOADED -->
  * </core-loading>
+ *
+ * IMPORTANT: Due to how ng-content works in Angular, the content of core-loading will be executed as soon as your view
+ * is loaded, even if the content hidden. So if you have the following code:
+ * <core-loading [hideUntil]="dataLoaded"><my-component></my-component></core-loading>
+ *
+ * The component "my-component" will be initialized immediately, even if dataLoaded is false, but it will be hidden. If you want
+ * your component to be initialized only if dataLoaded is true, then you should use ngIf:
+ * <core-loading [hideUntil]="dataLoaded"><my-component *ngIf="dataLoaded"></my-component></core-loading>
  */
 @Component({
     selector: 'core-loading',

src/components/tabs/tab.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter } from '@angular/core';
+import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
 import { CoreTabsComponent } from './tabs';
 
 /**
@@ -20,17 +20,23 @@ import { CoreTabsComponent } from './tabs';
  *
  * You must provide either a title or an icon for the tab.
  *
+ * The tab content MUST be surrounded by ng-template. This component uses ngTemplateOutlet instead of ng-content because the
+ * latter executes all the code immediately. This means that all the tabs would be initialized as soon as your view is
+ * loaded, leading to performance issues.
+ *
  * Example usage:
  *
  * <core-tabs selectedIndex="1">
  *     <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')">
+ *         <ng-template> <!-- This ng-template is required. -->
  *             <!-- Tab contents. -->
+ *         </ng-template>
  *     </core-tab>
  * </core-tabs>
  */
 @Component({
     selector: 'core-tab',
-    template: '<ng-content></ng-content>'
+    template: '<ng-container *ngIf="loaded" [ngTemplateOutlet]="template"></ng-container>'
 })
 export class CoreTabComponent implements OnInit, OnDestroy {
     @Input() title?: string; // The tab title.
@@ -42,7 +48,10 @@ export class CoreTabComponent implements OnInit, OnDestroy {
     @Input() id?: string; // An ID to identify the tab.
     @Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>();
 
+    @ContentChild(TemplateRef) template: TemplateRef<any> // Template defined by the content.
+
     element: HTMLElement; // The core-tab element.
+    loaded = false;
 
     constructor(private tabs: CoreTabsComponent, element: ElementRef) {
         this.element = element.nativeElement;
@@ -61,4 +70,20 @@ export class CoreTabComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.tabs.removeTab(this);
     }
+
+    /**
+     * Select tab.
+     */
+    selectTab() {
+        this.element.classList.add('selected');
+        this.loaded = true;
+        this.ionSelect.emit(this);
+    }
+
+    /**
+     * Unselect tab.
+     */
+    unselectTab() {
+        this.element.classList.remove('selected');
+    }
 }

src/components/tabs/tabs.ts

@@ -26,7 +26,9 @@ import { CoreTabComponent } from './tab';
  *
  * <core-tabs selectedIndex="1">
  *     <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="switchTab('timeline')">
+ *         <ng-template> <!-- This ng-template is required, @see CoreTabComponent. -->
  *             <!-- Tab contents. -->
+ *         </ng-template>
  *     </core-tab>
  * </core-tabs>
  *
@@ -171,7 +173,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
             index = 0;
         }
 
-        const currenTab = this.getSelected(),
+        const currentTab = this.getSelected(),
             newTab = this.tabs[index];
 
         if (!newTab.enabled || !newTab.show) {
@@ -179,14 +181,13 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
             return;
         }
 
-        if (currenTab) {
+        if (currentTab) {
             // Unselect previous selected tab.
-            currenTab.element.classList.remove('selected');
+            currentTab.unselectTab();
         }
 
         this.selected = index;
-        newTab.element.classList.add('selected');
+        newTab.selectTab();
-        newTab.ionSelect.emit(newTab);
         this.ionChange.emit(newTab);
     }
 

src/core/courses/pages/my-overview/my-overview.html

@@ -16,11 +16,14 @@
     <core-tabs [selectedIndex]="firstSelectedTab" [hideUntil]="tabsReady">
         <!-- Site home tab. -->
         <core-tab [show]="siteHomeEnabled" [title]="'core.sitehome.sitehome' | translate" (ionSelect)="tabChanged('sitehome')">
+            <ng-template>
                 <core-sitehome-index></core-sitehome-index>
+            </ng-template>
         </core-tab>
 
         <!-- Timeline tab. -->
         <core-tab [title]="'core.courses.timeline' | translate" (ionSelect)="tabChanged('timeline')">
+            <ng-template>
                 <ion-content>
                     <ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
                         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
@@ -48,10 +51,12 @@
                         <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesoverview' | translate"></core-empty-box>
                     </core-loading>
                 </ion-content>
+            </ng-template>
         </core-tab>
 
         <!-- Courses tab. -->
         <core-tab [title]="'core.courses.courses' | translate" (ionSelect)="tabChanged('courses')">
+            <ng-template>
                 <ion-content>
                     <ion-refresher [enabled]="timeline.loaded || timelineCourses.loaded || courses.loaded" (ionRefresh)="refreshMyOverview($event)">
                         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
@@ -97,7 +102,7 @@
                         </div>
                     </core-loading>
                 </ion-content>
+            </ng-template>
         </core-tab>
     </core-tabs>
-
 </ion-content>