Add loading indicators

* Dividend timeline
* Investment timeline

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

@@ -46,7 +46,9 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public investmentTimelineDataLabel = $localize`Investment`;
   public investmentsByGroup: InvestmentItem[];
   public isLoadingBenchmarkComparator: boolean;
+  public isLoadingDividendTimelineChart: boolean;
   public isLoadingInvestmentChart: boolean;
+  public isLoadingInvestmentTimelineChart: boolean;
   public mode: GroupBy = 'month';
   public modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' },
@@ -154,6 +156,9 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   }
 
   private fetchDividendsAndInvestments() {
+    this.isLoadingDividendTimelineChart = true;
+    this.isLoadingInvestmentTimelineChart = true;
+
     this.dataService
       .fetchDividends({
         filters: this.userService.getFilters(),
@@ -164,6 +169,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       .subscribe(({ dividends }) => {
         this.dividendsByGroup = dividends;
 
+        this.isLoadingDividendTimelineChart = false;
+
         this.changeDetectorRef.markForCheck();
       });
 
@@ -194,6 +201,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
               ? translate('MONTH')
               : translate('MONTHS');
 
+        this.isLoadingInvestmentTimelineChart = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

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

@@ -294,6 +294,7 @@
           [daysInMarket]="daysInMarket"
           [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingInvestmentTimelineChart"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
           [savingsRate]="savingsRate"
@@ -331,6 +332,7 @@
           [daysInMarket]="daysInMarket"
           [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingDividendTimelineChart"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
         />