Improve usability: lazy load endpoints on tab change

apps/client/src/app/pages/home/home-page.component.ts

@@ -8,6 +8,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatTabChangeEvent } from '@angular/material/tabs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { PerformanceChartDialog } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.component';
@@ -44,6 +45,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
   @ViewChild('positionsContainer') positionsContainer: ElementRef;
 
   public canCreateAccount: boolean;
+  public currentTabIndex = 0;
   public dateRange: DateRange;
   public dateRangeOptions: ToggleOption[] = [
     { label: 'Today', value: '1d' },
@@ -57,7 +59,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public hasPermissionToReadForeignPortfolio: boolean;
-  public hasPositions = false;
+  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingOverview = true;
   public isLoadingPerformance = true;
@@ -153,7 +155,9 @@ export class HomePageComponent implements OnDestroy, OnInit {
     this.update();
   }
 
-  public onTabChanged() {
+  public onTabChanged(event: MatTabChangeEvent) {
+    this.currentTabIndex = event.index;
+
     this.update();
   }
 
@@ -182,54 +186,55 @@ export class HomePageComponent implements OnDestroy, OnInit {
   }
 
   private update() {
-    this.hasPositions = undefined;
+    if (this.currentTabIndex === 0) {
-    this.isLoadingOverview = true;
+      this.isLoadingPerformance = true;
-    this.isLoadingPerformance = true;
+
-    this.positions = undefined;
+      this.dataService
+        .fetchChart({ range: this.dateRange })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe((chartData) => {
+          this.historicalDataItems = chartData.map((chartDataItem) => {
+            return {
+              date: chartDataItem.date,
+              value: chartDataItem.value
+            };
+          });
 
-    this.dataService
+          this.changeDetectorRef.markForCheck();
-      .fetchChart({ range: this.dateRange })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((chartData) => {
-        this.historicalDataItems = chartData.map((chartDataItem) => {
-          return {
-            date: chartDataItem.date,
-            value: chartDataItem.value
-          };
         });
 
-        this.changeDetectorRef.markForCheck();
+      this.dataService
-      });
+        .fetchPortfolioPerformance({ range: this.dateRange })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe((response) => {
+          this.performance = response;
+          this.isLoadingPerformance = false;
 
-    this.dataService
+          this.changeDetectorRef.markForCheck();
-      .fetchPortfolioPerformance({ range: this.dateRange })
+        });
-      .pipe(takeUntil(this.unsubscribeSubject))
+    } else if (this.currentTabIndex === 1) {
-      .subscribe((response) => {
+      this.dataService
-        this.performance = response;
+        .fetchPositions({ range: this.dateRange })
-        this.isLoadingPerformance = false;
+        .pipe(takeUntil(this.unsubscribeSubject))
-
+        .subscribe((response) => {
-        this.changeDetectorRef.markForCheck();
+          this.positions = response.positions;
-      });
+          this.hasPositions = this.positions?.length > 0;
-
-    this.dataService
-      .fetchPortfolioOverview()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((response) => {
-        this.overview = response;
-        this.isLoadingOverview = false;
 
-        this.changeDetectorRef.markForCheck();
+          this.changeDetectorRef.markForCheck();
-      });
+        });
+    } else if (this.currentTabIndex === 2) {
+      this.isLoadingOverview = true;
 
-    this.dataService
+      this.dataService
-      .fetchPositions({ range: this.dateRange })
+        .fetchPortfolioOverview()
-      .pipe(takeUntil(this.unsubscribeSubject))
+        .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((response) => {
+        .subscribe((response) => {
-        this.positions = response.positions;
+          this.overview = response;
-        this.hasPositions = this.positions?.length > 0;
+          this.isLoadingOverview = false;
 
-        this.changeDetectorRef.markForCheck();
+          this.changeDetectorRef.markForCheck();
-      });
+        });
+    }
 
     this.changeDetectorRef.markForCheck();
   }

apps/client/src/app/pages/home/home-page.html

@@ -4,7 +4,7 @@
   headerPosition="below"
   mat-align-tabs="center"
   [disablePagination]="true"
-  (selectedTabChange)="onTabChanged()"
+  (selectedTabChange)="onTabChanged($event)"
 >
   <mat-tab>
     <ng-template mat-tab-label>

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -8,6 +8,7 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
+import { MatTabChangeEvent } from '@angular/material/tabs';
 import { ActivatedRoute } from '@angular/router';
 import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -32,11 +33,12 @@ import { first, takeUntil } from 'rxjs/operators';
 export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   @ViewChild('positionsContainer') positionsContainer: ElementRef;
 
+  public currentTabIndex = 0;
   public dateRange: DateRange = 'max';
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToReadForeignPortfolio: boolean;
-  public hasPositions = false;
+  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
@@ -92,7 +94,9 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
       .subscribe((fragment) => this.viewportScroller.scrollToAnchor(fragment));
   }
 
-  public onTabChanged() {
+  public onTabChanged(event: MatTabChangeEvent) {
+    this.currentTabIndex = event.index;
+
     this.update();
   }
 
@@ -102,43 +106,43 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   }
 
   private update() {
-    this.hasPositions = undefined;
+    if (this.currentTabIndex === 0) {
-    this.isLoadingPerformance = true;
+      this.isLoadingPerformance = true;
-    this.positions = undefined;
+
+      this.dataService
+        .fetchChart({ range: this.dateRange })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe((chartData) => {
+          this.historicalDataItems = chartData.map((chartDataItem) => {
+            return {
+              date: chartDataItem.date,
+              value: chartDataItem.value
+            };
+          });
 
-    this.dataService
+          this.changeDetectorRef.markForCheck();
-      .fetchChart({ range: this.dateRange })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((chartData) => {
-        this.historicalDataItems = chartData.map((chartDataItem) => {
-          return {
-            date: chartDataItem.date,
-            value: chartDataItem.value
-          };
         });
 
-        this.changeDetectorRef.markForCheck();
+      this.dataService
-      });
+        .fetchPortfolioPerformance({ range: this.dateRange })
-
+        .pipe(takeUntil(this.unsubscribeSubject))
-    this.dataService
+        .subscribe((response) => {
-      .fetchPortfolioPerformance({ range: this.dateRange })
+          this.performance = response;
-      .pipe(takeUntil(this.unsubscribeSubject))
+          this.isLoadingPerformance = false;
-      .subscribe((response) => {
-        this.performance = response;
-        this.isLoadingPerformance = false;
-
-        this.changeDetectorRef.markForCheck();
-      });
 
-    this.dataService
+          this.changeDetectorRef.markForCheck();
-      .fetchPositions({ range: this.dateRange })
+        });
-      .pipe(takeUntil(this.unsubscribeSubject))
+    } else if (this.currentTabIndex === 1) {
-      .subscribe((response) => {
+      this.dataService
-        this.positions = response.positions;
+        .fetchPositions({ range: this.dateRange })
-        this.hasPositions = this.positions?.length > 0;
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe((response) => {
+          this.positions = response.positions;
+          this.hasPositions = this.positions?.length > 0;
 
-        this.changeDetectorRef.markForCheck();
+          this.changeDetectorRef.markForCheck();
-      });
+        });
+    }
 
     this.changeDetectorRef.markForCheck();
   }

apps/client/src/app/pages/zen/zen-page.html

@@ -4,7 +4,7 @@
   headerPosition="below"
   mat-align-tabs="center"
   [disablePagination]="true"
-  (selectedTabChange)="onTabChanged()"
+  (selectedTabChange)="onTabChanged($event)"
 >
   <mat-tab>
     <ng-template mat-tab-label>