setup skeleton loader for data tables

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

@@ -53,6 +53,7 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
   ];
   public statusFilterOptions = QUEUE_JOB_STATUS_LIST;
   public user: User;
+  public isLoading = false;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -138,12 +139,14 @@ 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

@@ -33,6 +33,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public hasPermissionToImpersonateAllUsers: boolean;
   public info: InfoItem;
   public user: User;
+  public isLoading = false;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -142,12 +143,14 @@ 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,6 +19,7 @@ import { AdminUsersComponent } from './admin-users.component';
     GfValueComponent,
     MatButtonModule,
     MatMenuModule,
+    NgxSkeletonLoaderModule,
     MatTableModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]