Bugfix/improve loading indicator of benchmark comparator (#1247)

* Improve loading indicator

* Update changelog

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

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() {

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;
     }
   }
 }

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"