Add loading progress bar to datatables.

src/app/pages/accounts/account-details/account-details.component.html

@@ -382,6 +382,11 @@
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
 
+              <div *ngIf="transactionsLoading">
+                <h2 class="text-center"><strong>Loading Transactions!</strong></h2>
+                <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+              </div>
+
               <table
                 mat-table
                 class="mat-elevation-z10"
@@ -491,6 +496,11 @@
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
 
+              <div *ngIf="accountsLoading">
+                <h2 class="text-center"><strong>Loading Accounts!</strong></h2>
+                <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+              </div>
+
               <mat-table
                 class="mat-elevation-z10"
                 [dataSource]="userDataSource"

src/app/pages/accounts/account-details/account-details.component.ts

@@ -69,6 +69,8 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   category: string;
   area: string;
   areaType: string;
+  accountsLoading: boolean = true;
+  transactionsLoading: boolean = true;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -155,6 +157,9 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       this.userDataSource.paginator = this.userTablePaginator;
       this.userDataSource.sort = this.userTableSort;
       this.accounts = accounts;
+      if (accounts.length > 0) {
+        this.accountsLoading = false;
+      }
       this.cdr.detectChanges();
     });
 
@@ -163,6 +168,9 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       this.transactionsDataSource.paginator = this.transactionTablePaginator;
       this.transactionsDataSource.sort = this.transactionTableSort;
       this.transactions = transactions;
+      if (transactions.length > 0) {
+        this.transactionsLoading = false;
+      }
       this.cdr.detectChanges();
     });
     this.userService.getCategories();

src/app/pages/accounts/accounts.component.html

@@ -64,6 +64,11 @@
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
+          <div *ngIf="loading">
+            <h2 class="text-center"><strong>Loading Accounts!</strong></h2>
+            <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+          </div>
+
           <mat-table
             class="mat-elevation-z10"
             [dataSource]="dataSource"

src/app/pages/accounts/accounts.component.ts

@@ -31,6 +31,7 @@ export class AccountsComponent implements OnInit, AfterViewInit {
   accountsType: string = 'all';
   accountTypes: Array<string>;
   tokenSymbol: string;
+  loading: boolean = true;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -48,6 +49,9 @@ export class AccountsComponent implements OnInit, AfterViewInit {
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.accounts = accounts;
+      if (accounts.length > 0) {
+        this.loading = false;
+      }
     });
     try {
       // TODO it feels like this should be in the onInit handler

src/app/pages/accounts/accounts.module.ts

@@ -23,6 +23,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ReactiveFormsModule } from '@angular/forms';
 import { AccountSearchComponent } from './account-search/account-search.component';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @NgModule({
   declarations: [
@@ -51,6 +52,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     MatProgressSpinnerModule,
     ReactiveFormsModule,
     MatSnackBarModule,
+    MatProgressBarModule,
   ],
 })
 export class AccountsModule {}

src/app/pages/admin/admin.component.html

@@ -43,6 +43,11 @@
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
+          <div *ngIf="loading">
+            <h2 class="text-center"><strong>Loading Actions!</strong></h2>
+            <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+          </div>
+
           <mat-table class="mat-elevation-z10" [dataSource]="dataSource" multiTemplateDataRows>
             <!-- Expand Column -->
             <ng-container matColumnDef="expand">

src/app/pages/admin/admin.component.ts

@@ -26,6 +26,7 @@ export class AdminComponent implements OnInit {
   displayedColumns: Array<string> = ['expand', 'user', 'role', 'action', 'status', 'approve'];
   action: Action;
   actions: Array<Action>;
+  loading: boolean = true;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -39,6 +40,9 @@ export class AdminComponent implements OnInit {
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.actions = actions;
+      if (actions.length > 0) {
+        this.loading = false;
+      }
     });
   }
 

src/app/pages/admin/admin.module.ts

@@ -13,6 +13,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRippleModule } from '@angular/material/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @NgModule({
   declarations: [AdminComponent],
@@ -29,6 +30,7 @@ import { MatRippleModule } from '@angular/material/core';
     MatPaginatorModule,
     MatButtonModule,
     MatRippleModule,
+    MatProgressBarModule,
   ],
 })
 export class AdminModule {}

src/app/pages/pages-routing.module.ts

@@ -22,10 +22,10 @@ const routes: Routes = [
     path: 'tokens',
     loadChildren: () => import('@pages/tokens/tokens.module').then((m) => m.TokensModule),
   },
-  {
+  // {
-    path: 'admin',
+  //   path: 'admin',
-    loadChildren: () => import('@pages/admin/admin.module').then((m) => m.AdminModule),
+  //   loadChildren: () => import('@pages/admin/admin.module').then((m) => m.AdminModule),
-  },
+  // },
   { path: '**', redirectTo: 'home', pathMatch: 'full' },
 ];
 

src/app/pages/settings/settings.component.html

@@ -40,6 +40,7 @@
             </div>
           </div>
         </div>
+
         <div class="col-12 mb-2">
           <div class="card">
             <mat-card-title class="card-header">
@@ -67,6 +68,12 @@
                 />
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
+
+              <div *ngIf="loading">
+                <h2 class="text-center"><strong>Loading Trusted Users!</strong></h2>
+                <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+              </div>
+
               <mat-table
                 class="mat-elevation-z10"
                 [dataSource]="dataSource"

src/app/pages/settings/settings.component.ts

@@ -17,6 +17,7 @@ export class SettingsComponent implements OnInit {
   displayedColumns: Array<string> = ['name', 'email', 'userId'];
   trustedUsers: Array<Staff>;
   userInfo: Staff;
+  loading: boolean = true;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -29,6 +30,9 @@ export class SettingsComponent implements OnInit {
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.trustedUsers = users;
+      if (users.length > 0) {
+        this.loading = false;
+      }
     });
     this.userInfo = this.authService.getPrivateKeyInfo();
   }

src/app/pages/settings/settings.module.ts

@@ -18,6 +18,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSelectModule } from '@angular/material/select';
 import { MatMenuModule } from '@angular/material/menu';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @NgModule({
   declarations: [SettingsComponent, OrganizationComponent],
@@ -38,6 +39,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     MatSelectModule,
     MatMenuModule,
     ReactiveFormsModule,
+    MatProgressBarModule,
   ],
 })
 export class SettingsModule {}

src/app/pages/tokens/tokens.component.html

@@ -45,6 +45,11 @@
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
+          <div *ngIf="loading">
+            <h2 class="text-center"><strong>Loading Tokens!</strong></h2>
+            <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+          </div>
+
           <mat-table
             class="mat-elevation-z10 table-responsive"
             [dataSource]="dataSource"

src/app/pages/tokens/tokens.component.ts

@@ -25,6 +25,7 @@ export class TokensComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort) sort: MatSort;
   tokens: Array<Token>;
   token: Token;
+  loading: boolean = true;
 
   constructor(private tokenService: TokenService) {}
 
@@ -39,6 +40,9 @@ export class TokensComponent implements OnInit, AfterViewInit {
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.tokens = tokens;
+      if (tokens.length > 0) {
+        this.loading = false;
+      }
     });
   }
 

src/app/pages/tokens/tokens.module.ts

@@ -17,6 +17,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCardModule } from '@angular/material/card';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @NgModule({
   declarations: [TokensComponent, TokenDetailsComponent],
@@ -37,6 +38,7 @@ import { MatCardModule } from '@angular/material/card';
     MatToolbarModule,
     MatCardModule,
     MatRippleModule,
+    MatProgressBarModule,
   ],
 })
 export class TokensModule {}

src/app/pages/transactions/transactions.component.html

@@ -63,6 +63,11 @@
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
+          <div *ngIf="loading">
+            <h2 class="text-center"><strong>Loading Transactions!</strong></h2>
+            <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+          </div>
+
           <table
             mat-table
             class="mat-elevation-z10"

src/app/pages/transactions/transactions.component.ts

@@ -29,6 +29,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   transactionsType: string = 'all';
   transactionsTypes: Array<string>;
   tokenSymbol: string;
+  loading: boolean = true;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -47,6 +48,9 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
       this.transactionDataSource.paginator = this.paginator;
       this.transactionDataSource.sort = this.sort;
       this.transactions = transactions;
+      if (transactions.length > 0) {
+        this.loading = false;
+      }
     });
     this.userService
       .getTransactionTypes()

src/app/pages/transactions/transactions.module.ts

@@ -17,6 +17,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @NgModule({
   declarations: [TransactionsComponent, TransactionDetailsComponent],
@@ -37,6 +38,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     MatCardModule,
     MatRippleModule,
     MatSnackBarModule,
+    MatProgressBarModule,
   ],
 })
 export class TransactionsModule {}