From c802879a314d0af033c8766347f88ed18d081150 Mon Sep 17 00:00:00 2001
From: tobikugel <tobiaskugel@outlook.com>
Date: Tue, 11 Mar 2025 11:37:38 -0300
Subject: [PATCH] feat: add spinner whilst loading

---
 .../portfolio/analysis/analysis-page.component.ts    |  3 +++
 .../app/pages/portfolio/analysis/analysis-page.html  | 12 ++++++++++--
 .../pages/portfolio/analysis/analysis-page.module.ts |  2 ++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index 06f3ee038..40a39b2c6 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/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;
       });
   }
 
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index ae8196183..fdab88373 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/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
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts
index fb39b2ab9..e02e15ec8 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts
+++ b/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]