Improve loading indicator

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

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

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"