From 49e31bd5d12cde843eef0cf39138e10619ceb582 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 16 Feb 2024 09:27:17 +0100
Subject: [PATCH] Add loading indicators

* Dividend timeline
* Investment timeline
---
 .../pages/portfolio/analysis/analysis-page.component.ts  | 9 +++++++++
 .../src/app/pages/portfolio/analysis/analysis-page.html  | 2 ++
 2 files changed, 11 insertions(+)

diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index a9f0372de..d2f8487ad 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -46,7 +46,9 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public investmentTimelineDataLabel = $localize`Investment`;
   public investmentsByGroup: InvestmentItem[];
   public isLoadingBenchmarkComparator: boolean;
+  public isLoadingDividendTimelineChart: boolean;
   public isLoadingInvestmentChart: boolean;
+  public isLoadingInvestmentTimelineChart: boolean;
   public mode: GroupBy = 'month';
   public modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' },
@@ -154,6 +156,9 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   }
 
   private fetchDividendsAndInvestments() {
+    this.isLoadingDividendTimelineChart = true;
+    this.isLoadingInvestmentTimelineChart = true;
+
     this.dataService
       .fetchDividends({
         filters: this.userService.getFilters(),
@@ -164,6 +169,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       .subscribe(({ dividends }) => {
         this.dividendsByGroup = dividends;
 
+        this.isLoadingDividendTimelineChart = false;
+
         this.changeDetectorRef.markForCheck();
       });
 
@@ -194,6 +201,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
               ? translate('MONTH')
               : translate('MONTHS');
 
+        this.isLoadingInvestmentTimelineChart = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index b991ce122..44bb970ef 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -294,6 +294,7 @@
           [daysInMarket]="daysInMarket"
           [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingInvestmentTimelineChart"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
           [savingsRate]="savingsRate"
@@ -331,6 +332,7 @@
           [daysInMarket]="daysInMarket"
           [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingDividendTimelineChart"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
         />