feat: add spinner whilst loading

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

@@ -58,6 +58,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public isLoadingDividendTimelineChart: boolean;
   public isLoadingInvestmentChart: boolean;
   public isLoadingInvestmentTimelineChart: boolean;
+  public isLoadingAiPrompt: boolean;
   public mode: GroupBy = 'month';
   public modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' },
@@ -151,6 +152,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   }
 
   public onCopyPromptToClipboard(mode: AiPromptMode) {
+    this.isLoadingAiPrompt = true;
     this.dataService
       .fetchPrompt(mode)
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -173,6 +175,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
           });
 
         this.actionsMenuButton.closeMenu();
+        this.isLoadingAiPrompt = false;
       });
   }
 

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

@@ -24,7 +24,11 @@
                   @if (user?.subscription?.type === 'Basic') {
                     <gf-premium-indicator class="mr-2" />
                   } @else {
-                    <ion-icon class="mr-2" name="copy-outline" />
+                    @if (isLoadingAiPrompt) {
+                      <mat-spinner class="mr-2" [diameter]="20" />
+                    } @else {
+                      <ion-icon class="mr-2" name="copy-outline" />
+                    }
                   }
                   <ng-container i18n
                     >Copy portfolio data to clipboard for AI
@@ -41,7 +45,11 @@
                   @if (user?.subscription?.type === 'Basic') {
                     <gf-premium-indicator class="mr-2" />
                   } @else {
-                    <ion-icon class="mr-2" name="copy-outline" />
+                    @if (isLoadingAiPrompt) {
+                      <mat-spinner class="mr-2" [diameter]="20" />
+                    } @else {
+                      <ion-icon class="mr-2" name="copy-outline" />
+                    }
                   }
                   <ng-container i18n
                     >Copy AI prompt to clipboard for analysis</ng-container

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

@@ -10,6 +10,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AnalysisPageRoutingModule } from './analysis-page-routing.module';
@@ -29,6 +30,7 @@ import { AnalysisPageComponent } from './analysis-page.component';
     MatButtonModule,
     MatCardModule,
     MatMenuModule,
+    MatProgressSpinnerModule,
     NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]