Task/add skeleton loader to coupons table of admin control panel (#7327)

Add skeleton loader

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

@@ -63,6 +63,7 @@ import {
   trashOutline
 } from 'ionicons/icons';
 import ms, { StringValue } from 'ms';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -79,6 +80,7 @@ import ms, { StringValue } from 'ms';
     MatSnackBarModule,
     MatSlideToggleModule,
     MatTableModule,
+    NgxSkeletonLoaderModule,
     ReactiveFormsModule,
     RouterModule
   ],
@@ -102,6 +104,7 @@ export class GfAdminOverviewComponent implements OnInit {
   protected hasPermissionToToggleReadOnlyMode: boolean;
   protected readonly info: InfoItem;
   protected isDataGatheringEnabled: boolean;
+  protected isLoading = false;
   protected readonly permissions = permissions;
   protected systemMessage: SystemMessage;
   protected userCount: number;
@@ -320,6 +323,8 @@ export class GfAdminOverviewComponent implements OnInit {
   }
 
   private fetchAdminData() {
+    this.isLoading = true;
+
     this.adminService
       .fetchAdminData()
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -336,6 +341,8 @@ export class GfAdminOverviewComponent implements OnInit {
         this.userCount = userCount;
         this.version = version;
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

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

@@ -248,6 +248,17 @@
                   mat-row
                 ></tr>
               </table>
+
+              @if (isLoading) {
+                <ngx-skeleton-loader
+                  animation="pulse"
+                  class="px-4 py-3"
+                  [theme]="{
+                    height: '1.5rem',
+                    width: '100%'
+                  }"
+                />
+              }
             </div>
           </mat-card-content>
           <mat-card-actions align="end">