From 184b7fcaf38950395f93fe73b2d02a840e6a95bc Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Tue, 10 Aug 2021 21:35:38 +0200 Subject: [PATCH] Improve usability: lazy load endpoints on tab change --- .../src/app/pages/home/home-page.component.ts | 91 ++++++++++--------- apps/client/src/app/pages/home/home-page.html | 2 +- .../src/app/pages/zen/zen-page.component.ts | 72 ++++++++------- apps/client/src/app/pages/zen/zen-page.html | 2 +- 4 files changed, 88 insertions(+), 79 deletions(-) diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts index 036ff8eb4..4b204cc99 100644 --- a/apps/client/src/app/pages/home/home-page.component.ts +++ b/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; - this.isLoadingOverview = true; - this.isLoadingPerformance = true; - this.positions = undefined; + if (this.currentTabIndex === 0) { + this.isLoadingPerformance = true; + + 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 - .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.changeDetectorRef.markForCheck(); - }); + this.dataService + .fetchPortfolioPerformance({ range: this.dateRange }) + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((response) => { + this.performance = response; + this.isLoadingPerformance = false; - this.dataService - .fetchPortfolioPerformance({ range: this.dateRange }) - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((response) => { - this.performance = response; - this.isLoadingPerformance = false; - - this.changeDetectorRef.markForCheck(); - }); - - this.dataService - .fetchPortfolioOverview() - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((response) => { - this.overview = response; - this.isLoadingOverview = false; + this.changeDetectorRef.markForCheck(); + }); + } else if (this.currentTabIndex === 1) { + this.dataService + .fetchPositions({ range: this.dateRange }) + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((response) => { + this.positions = response.positions; + this.hasPositions = this.positions?.length > 0; - this.changeDetectorRef.markForCheck(); - }); + this.changeDetectorRef.markForCheck(); + }); + } else if (this.currentTabIndex === 2) { + this.isLoadingOverview = true; - this.dataService - .fetchPositions({ range: this.dateRange }) - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((response) => { - 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(); + }); + } this.changeDetectorRef.markForCheck(); } diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html index 7eaea908f..477a5dcac 100644 --- a/apps/client/src/app/pages/home/home-page.html +++ b/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)" > diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts index 39e072f3a..53abe15c1 100644 --- a/apps/client/src/app/pages/zen/zen-page.component.ts +++ b/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; - this.isLoadingPerformance = true; - this.positions = undefined; + if (this.currentTabIndex === 0) { + this.isLoadingPerformance = true; + + 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 - .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.changeDetectorRef.markForCheck(); - }); - - this.dataService - .fetchPortfolioPerformance({ range: this.dateRange }) - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((response) => { - this.performance = response; - this.isLoadingPerformance = false; - - this.changeDetectorRef.markForCheck(); - }); + this.dataService + .fetchPortfolioPerformance({ range: this.dateRange }) + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((response) => { + this.performance = response; + this.isLoadingPerformance = false; - this.dataService - .fetchPositions({ range: this.dateRange }) - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((response) => { - this.positions = response.positions; - this.hasPositions = this.positions?.length > 0; + this.changeDetectorRef.markForCheck(); + }); + } else if (this.currentTabIndex === 1) { + this.dataService + .fetchPositions({ range: this.dateRange }) + .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(); } diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html index f57b2a2bb..0fd5f5834 100644 --- a/apps/client/src/app/pages/zen/zen-page.html +++ b/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)" >