Loading spinner on toggle

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()"

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);
   }
 

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
   ],

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;