From 98afc4ff8a7677ffb5900db8d865f6ce11a80af2 Mon Sep 17 00:00:00 2001
From: bptrgx <47859535+bptrgx@users.noreply.github.com>
Date: Wed, 20 Sep 2023 17:44:42 +0200
Subject: [PATCH] Loading spinner on toggle

---
 .../components/accounts-table/accounts-table.component.html | 6 ++++++
 .../components/accounts-table/accounts-table.component.ts   | 4 +++-
 .../app/components/accounts-table/accounts-table.module.ts  | 2 ++
 libs/common/src/lib/types/account-with-value.type.ts        | 1 +
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
index a2d146cc9..1031975be 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@@ -7,7 +7,13 @@
     ></th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-center">
+        <mat-spinner
+          *ngIf="element.isLoading"
+          [diameter]="20"
+          (click)="$event.stopPropagation()"
+        ></mat-spinner>
         <button
+          *ngIf="!element.isLoading"
           class="mx-1 no-min-width px-2"
           mat-button
           (click)="onToggleExcluded(element); $event.stopPropagation()"
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.ts b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
index 72b747841..4559be20d 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
@@ -12,7 +12,8 @@ import {
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
-import { Account as AccountModel } from '@prisma/client';
+import { AccountWithValue as AccountModel } from '@ghostfolio/common/types';
+
 import { get } from 'lodash';
 import { Subject, Subscription } from 'rxjs';
 
@@ -99,6 +100,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public onToggleExcluded(aAccount: AccountModel) {
+    aAccount.isLoading = true;
     this.accountToggleExcluded.emit(aAccount);
   }
 
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.module.ts b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
index 7dad41dbf..c4fa07f18 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.module.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
@@ -8,6 +8,7 @@ import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { AccountsTableComponent } from './accounts-table.component';
 
@@ -22,6 +23,7 @@ import { AccountsTableComponent } from './accounts-table.component';
     MatMenuModule,
     MatSortModule,
     MatTableModule,
+    MatProgressSpinnerModule,
     NgxSkeletonLoaderModule,
     RouterModule
   ],
diff --git a/libs/common/src/lib/types/account-with-value.type.ts b/libs/common/src/lib/types/account-with-value.type.ts
index bc7577d91..036b85887 100644
--- a/libs/common/src/lib/types/account-with-value.type.ts
+++ b/libs/common/src/lib/types/account-with-value.type.ts
@@ -2,6 +2,7 @@ import { Account as AccountModel, Platform } from '@prisma/client';
 
 export type AccountWithValue = AccountModel & {
   balanceInBaseCurrency: number;
+  isLoading?: boolean;
   Platform?: Platform;
   transactionCount: number;
   value: number;