From ad28d906165932f3576c4a72b7c55ef73c7641f5 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 10 Sep 2022 20:34:21 +0200
Subject: [PATCH] Improve loading indicator

---
 .../benchmark-comparator/benchmark-comparator.component.ts | 6 +-----
 .../pages/portfolio/analysis/analysis-page.component.ts    | 7 +++++++
 .../src/app/pages/portfolio/analysis/analysis-page.html    | 1 +
 3 files changed, 9 insertions(+), 5 deletions(-)

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 5d5959cd5..30f85c66f 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
@@ -51,6 +51,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() benchmark: UniqueAsset;
   @Input() benchmarks: UniqueAsset[];
   @Input() daysInMarket: number;
+  @Input() isLoading: boolean;
   @Input() locale: string;
   @Input() performanceDataItems: LineChartItem[];
   @Input() user: User;
@@ -62,7 +63,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(
@@ -108,8 +108,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   }
 
   private initialize() {
-    this.isLoading = true;
-
     const data = {
       datasets: [
         {
@@ -218,8 +216,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 bea5d0a9a..1f4bd7458 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))
@@ -193,8 +196,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"