Feature/improve loading indicator of accounts table (#3761)

* Improve loading indicator

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the loading indicator of the accounts table
 - Improved the language localization for German (`de`)
 - Improved the language localization for Polish (`pl`)
 

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -92,11 +92,11 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
 
     this.isLoading = true;
 
-    if (this.accounts) {
     this.dataSource = new MatTableDataSource(this.accounts);
     this.dataSource.sort = this.sort;
     this.dataSource.sortingDataAccessor = get;
 
+    if (this.accounts) {
       this.isLoading = false;
     }
   }

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -136,18 +136,18 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
   }
 
   public onDeleteAccount(aId: string) {
+    this.reset();
+
     this.dataService
       .deleteAccount(aId)
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe({
+      .subscribe(() => {
-        next: () => {
         this.userService
           .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe();
 
         this.fetchAccounts();
-        }
       });
   }
 
@@ -193,19 +193,21 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((account: UpdateAccountDto | null) => {
         if (account) {
+          this.reset();
+
           this.dataService
             .putAccount(account)
             .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe({
+            .subscribe(() => {
-              next: () => {
               this.userService
                 .get(true)
                 .pipe(takeUntil(this.unsubscribeSubject))
                 .subscribe();
 
               this.fetchAccounts();
-              }
             });
+
+          this.changeDetectorRef.markForCheck();
         }
 
         this.router.navigate(['.'], { relativeTo: this.route });
@@ -264,19 +266,21 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((account: CreateAccountDto | null) => {
         if (account) {
+          this.reset();
+
           this.dataService
             .postAccount(account)
             .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe({
+            .subscribe(() => {
-              next: () => {
               this.userService
                 .get(true)
                 .pipe(takeUntil(this.unsubscribeSubject))
                 .subscribe();
 
               this.fetchAccounts();
-              }
             });
+
+          this.changeDetectorRef.markForCheck();
         }
 
         this.router.navigate(['.'], { relativeTo: this.route });
@@ -296,6 +300,8 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((data: any) => {
         if (data) {
+          this.reset();
+
           const { accountIdFrom, accountIdTo, balance }: TransferBalanceDto =
             data?.account;
 
@@ -318,9 +324,18 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
             .subscribe(() => {
               this.fetchAccounts();
             });
+
+          this.changeDetectorRef.markForCheck();
         }
 
         this.router.navigate(['.'], { relativeTo: this.route });
       });
   }
+
+  private reset() {
+    this.accounts = undefined;
+    this.totalBalanceInBaseCurrency = 0;
+    this.totalValueInBaseCurrency = 0;
+    this.transactionCount = 0;
+  }
 }