Feature/setup skeleton loader for data tables (#3735)

* Setup skeleton loader for data tables

* Update changelog

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Set up a performance logging service
+- Added a loading indicator to the queue jobs table in the admin control panel
+- Added a loading indicator to the users table in the admin control panel
 - Added the attribute `mode` to the scraper configuration to get quotes instantly
 
 ### Changed

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -51,6 +51,7 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
     'status',
     'actions'
   ];
+  public isLoading = false;
   public statusFilterOptions = QUEUE_JOB_STATUS_LIST;
   public user: User;
 
@@ -138,12 +139,16 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
   }
 
   private fetchJobs(aStatus?: JobStatus[]) {
+    this.isLoading = true;
+
     this.adminService
       .fetchJobs({ status: aStatus })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ jobs }) => {
         this.dataSource = new MatTableDataSource(jobs);
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -183,6 +183,16 @@
         <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
         <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
       </table>
+      @if (isLoading) {
+        <ngx-skeleton-loader
+          animation="pulse"
+          class="px-4 py-3"
+          [theme]="{
+            height: '1.5rem',
+            width: '100%'
+          }"
+        />
+      }
     </div>
   </div>
 </div>

apps/client/src/app/components/admin-jobs/admin-jobs.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminJobsComponent } from './admin-jobs.component';
 
@@ -17,6 +18,7 @@ import { AdminJobsComponent } from './admin-jobs.component';
     MatMenuModule,
     MatSelectModule,
     MatTableModule,
+    NgxSkeletonLoaderModule,
     ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -32,6 +32,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public hasPermissionForSubscription: boolean;
   public hasPermissionToImpersonateAllUsers: boolean;
   public info: InfoItem;
+  public isLoading = false;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -142,12 +143,16 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   }
 
   private fetchAdminData() {
+    this.isLoading = true;
+
     this.adminService
       .fetchAdminData()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ users }) => {
         this.dataSource = new MatTableDataSource(users);
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

apps/client/src/app/components/admin-users/admin-users.html

@@ -245,6 +245,16 @@
           ></tr>
         </table>
       </div>
+      @if (isLoading) {
+        <ngx-skeleton-loader
+          animation="pulse"
+          class="px-4 py-3"
+          [theme]="{
+            height: '1.5rem',
+            width: '100%'
+          }"
+        />
+      }
     </div>
   </div>
 </div>

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -6,6 +6,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminUsersComponent } from './admin-users.component';
 
@@ -18,7 +19,8 @@ import { AdminUsersComponent } from './admin-users.component';
     GfValueComponent,
     MatButtonModule,
     MatMenuModule,
-    MatTableModule
+    MatTableModule,
+    NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })