From e4fd255dd71e26f45d62785261a6f2b8bbd929ed Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Sep 2022 09:20:15 +0200
Subject: [PATCH] Bugfix/improve loading indicator of benchmark comparator
 (#1247)

* Improve loading indicator

* Update changelog
---
 CHANGELOG.md                                               | 1 +
 .../benchmark-comparator/benchmark-comparator.component.ts | 6 +-----
 .../pages/portfolio/analysis/analysis-page.component.ts    | 7 +++++++
 .../src/app/pages/portfolio/analysis/analysis-page.html    | 1 +
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f01623d1..2823a4e9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Improved the loading indicator of the benchmark comparator
 - Improved the error handling in the benchmark calculation
 
 ## 1.191.0 - 10.09.2022
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
index b86cefaae..2d8953058 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
@@ -52,6 +52,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() benchmark: string;
   @Input() benchmarks: Partial<SymbolProfile>[];
   @Input() daysInMarket: number;
+  @Input() isLoading: boolean;
   @Input() locale: string;
   @Input() performanceDataItems: LineChartItem[];
   @Input() user: User;
@@ -63,7 +64,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
 
   public chart: Chart<any>;
   public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
-  public isLoading = true;
 
   public constructor() {
     Chart.register(
@@ -99,8 +99,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   }
 
   private initialize() {
-    this.isLoading = true;
-
     const data = {
       datasets: [
         {
@@ -209,8 +207,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
         });
       }
     }
-
-    this.isLoading = false;
   }
 
   private getTooltipPluginConfiguration() {
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 29fdb914e..775b32981 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
@@ -32,6 +32,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public investments: InvestmentItem[];
   public investmentsByMonth: InvestmentItem[];
+  public isLoadingBenchmarkComparator: boolean;
   public mode: GroupBy;
   public modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' },
@@ -122,6 +123,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
 
   private update() {
     if (this.user.settings.isExperimentalFeatures) {
+      this.isLoadingBenchmarkComparator = true;
+
       this.dataService
         .fetchChart({ range: this.user?.settings?.dateRange, version: 2 })
         .pipe(takeUntil(this.unsubscribeSubject))
@@ -199,8 +202,12 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
             };
           });
 
+          this.isLoadingBenchmarkComparator = false;
+
           this.changeDetectorRef.markForCheck();
         });
+    } else {
+      this.isLoadingBenchmarkComparator = false;
     }
   }
 }
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 7b9498a53..66970cc50 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -8,6 +8,7 @@
         [benchmarkDataItems]="benchmarkDataItems"
         [benchmarks]="benchmarks"
         [daysInMarket]="daysInMarket"
+        [isLoading]="isLoadingBenchmarkComparator"
         [locale]="user?.settings?.locale"
         [performanceDataItems]="performanceDataItems"
         [user]="user"