From 02cf4295a9df85084a09bc6e9fbdd924ccf51bff Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 16 Feb 2024 09:43:51 +0100
Subject: [PATCH] Feature/add loading indicator to dividend and investment
 timelines (#3007)

* Add loading indicators

* Dividend timeline
* Investment timeline

* Update changelog
---
 CHANGELOG.md                                             | 2 ++
 .../pages/portfolio/analysis/analysis-page.component.ts  | 9 +++++++++
 .../src/app/pages/portfolio/analysis/analysis-page.html  | 2 ++
 3 files changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37434373a..cf26a7fb2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a loading indicator to the dividend timeline on the analysis page
+- Added a loading indicator to the investment timeline on the analysis page
 - Added support for the cryptocurrency _Jupiter_ (`JUP29210-USD`)
 
 ## 2.51.0 - 2024-02-12
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"
         />