From d857bc882ca84e857f2c48c4fe14c8ce7cd97536 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 14 Jul 2026 18:22:48 +0200
Subject: [PATCH] Task/add skeleton loader to coupons table of admin control
 panel (#7327)

Add skeleton loader
---
 .../admin-overview/admin-overview.component.ts        |  7 +++++++
 .../app/components/admin-overview/admin-overview.html | 11 +++++++++++
 2 files changed, 18 insertions(+)

diff --git a/apps/client/src/app/components/admin-overview/admin-overview.component.ts b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
index 7374fb05c..62bc78df1 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.component.ts
+++ b/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();
       });
   }
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 2fde94083..7e05600a6 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/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">