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,10 +186,8 @@ export class HomePageComponent implements OnDestroy, OnInit {
   }
 
   private update() {
-    this.hasPositions = undefined;
+    if (this.currentTabIndex === 0) {
-    this.isLoadingOverview = true;
       this.isLoadingPerformance = true;
-    this.positions = undefined;
 
       this.dataService
         .fetchChart({ range: this.dateRange })
@@ -210,26 +212,29 @@ export class HomePageComponent implements OnDestroy, OnInit {
 
           this.changeDetectorRef.markForCheck();
         });
-
+    } else if (this.currentTabIndex === 1) {
       this.dataService
-      .fetchPortfolioOverview()
+        .fetchPositions({ range: this.dateRange })
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe((response) => {
-        this.overview = response;
+          this.positions = response.positions;
-        this.isLoadingOverview = false;
+          this.hasPositions = this.positions?.length > 0;
 
           this.changeDetectorRef.markForCheck();
         });
+    } else if (this.currentTabIndex === 2) {
+      this.isLoadingOverview = true;
 
       this.dataService
-      .fetchPositions({ range: this.dateRange })
+        .fetchPortfolioOverview()
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe((response) => {
-        this.positions = response.positions;
+          this.overview = response;
-        this.hasPositions = this.positions?.length > 0;
+          this.isLoadingOverview = false;
 
           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,9 +106,8 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   }
 
   private update() {
-    this.hasPositions = undefined;
+    if (this.currentTabIndex === 0) {
       this.isLoadingPerformance = true;
-    this.positions = undefined;
 
       this.dataService
         .fetchChart({ range: this.dateRange })
@@ -129,7 +132,7 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
 
           this.changeDetectorRef.markForCheck();
         });
-
+    } else if (this.currentTabIndex === 1) {
       this.dataService
         .fetchPositions({ range: this.dateRange })
         .pipe(takeUntil(this.unsubscribeSubject))
@@ -139,6 +142,7 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
 
           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>