From 3cd77523a1f777650eacf1995883200f98bbe34a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:10:19 +0200
Subject: [PATCH] Feature/improve loading indicator of accounts table (#3761)

* Improve loading indicator

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../accounts-table.component.ts               |  8 +--
 .../pages/accounts/accounts-page.component.ts | 67 ++++++++++++-------
 3 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3eccf8cb..b5a589ac6 100644
--- a/CHANGELOG.md
+++ b/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`)
 
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 ff0358baa..afa0f1bf3 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
@@ -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;
+    this.dataSource = new MatTableDataSource(this.accounts);
+    this.dataSource.sort = this.sort;
+    this.dataSource.sortingDataAccessor = get;
 
+    if (this.accounts) {
       this.isLoading = false;
     }
   }
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index 3f1ed9efe..6a9ee14a4 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/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({
-        next: () => {
-          this.userService
-            .get(true)
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe();
+      .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
 
-          this.fetchAccounts();
-        }
+        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({
-              next: () => {
-                this.userService
-                  .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
-                  .subscribe();
-
-                this.fetchAccounts();
-              }
+            .subscribe(() => {
+              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({
-              next: () => {
-                this.userService
-                  .get(true)
-                  .pipe(takeUntil(this.unsubscribeSubject))
-                  .subscribe();
-
-                this.fetchAccounts();
-              }
+            .subscribe(() => {
+              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;
+  }
 }