Bugfix/improve loading indicator of investment chart (#1392)

* Improve loading indicator

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Improved the loading indicator of the portfolio evolution chart
+
 ## 1.206.2 - 20.10.2022
 
 ### Changed

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -53,6 +53,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() groupBy: GroupBy;
   @Input() historicalDataItems: LineChartItem[] = [];
   @Input() isInPercent = false;
+  @Input() isLoading = false;
   @Input() locale: string;
   @Input() range: DateRange = 'max';
   @Input() savingsRate = 0;
@@ -60,8 +61,6 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @ViewChild('chartCanvas') chartCanvas;
 
   public chart: Chart<any>;
-  public isLoading = true;
-
   private data: InvestmentItem[];
 
   public constructor() {
@@ -92,8 +91,6 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   }
 
   private initialize() {
-    this.isLoading = true;
-
     // Create a clone
     this.data = this.benchmarkDataItems.map((item) => Object.assign({}, item));
 
@@ -273,8 +270,6 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
         });
       }
     }
-
-    this.isLoading = false;
   }
 
   private getTooltipPluginConfiguration() {

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -35,6 +35,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public investments: InvestmentItem[];
   public investmentsByMonth: InvestmentItem[];
   public isLoadingBenchmarkComparator: boolean;
+  public isLoadingInvestmentChart: boolean;
   public mode: GroupBy = 'month';
   public modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' }
@@ -125,6 +126,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
 
   private update() {
     this.isLoadingBenchmarkComparator = true;
+    this.isLoadingInvestmentChart = true;
 
     this.dataService
       .fetchPortfolioPerformance({
@@ -156,6 +158,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
           });
         }
 
+        this.isLoadingInvestmentChart = false;
+
         this.updateBenchmarkDataItems();
 
         this.changeDetectorRef.markForCheck();

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -125,6 +125,7 @@
           [daysInMarket]="daysInMarket"
           [historicalDataItems]="performanceDataItems"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingBenchmarkComparator"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
         ></gf-investment-chart>