From a73809fff1e536938335ff5d7c72015980bedba9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 30 Sep 2026 19:43:25 +0200
Subject: [PATCH] Task/add loading indicator to platform and tag management of
 admin panel (#7982)

* Add loading indicator

* Update changelog
---
 CHANGELOG.md                                          |  2 ++
 .../admin-platform/admin-platform.component.html      | 11 +++++++++++
 .../admin-platform/admin-platform.component.ts        | 10 ++++++++++
 .../app/components/admin-tag/admin-tag.component.html | 11 +++++++++++
 .../app/components/admin-tag/admin-tag.component.ts   |  9 +++++++++
 5 files changed, 43 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4d9031a0f..46f30da1b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a loading indicator to the platform management of the admin control panel
+- Added a loading indicator to the tag management of the admin control panel
 - Added a _Refresh_ action to the user detail dialog menu in the admin control panel
 - Added the total column to the table of the tag management in the admin control panel
 
diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.html b/apps/client/src/app/components/admin-platform/admin-platform.component.html
index c349dd9b8a..b281011abb 100644
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.html
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html
@@ -103,6 +103,17 @@
   </table>
 </div>
 
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+}
+
 <mat-paginator
   [class.d-none]="dataSource.data.length <= pageSize"
   [hidePageSize]="true"
diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.ts b/apps/client/src/app/components/admin-platform/admin-platform.component.ts
index 0e6ed66d9b..89175c5d33 100644
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.ts
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.ts
@@ -36,6 +36,7 @@ import {
   trashOutline
 } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfCreateOrUpdatePlatformDialogComponent } from './create-or-update-platform-dialog/create-or-update-platform-dialog.component';
 import { CreateOrUpdatePlatformDialogParams } from './create-or-update-platform-dialog/interfaces/interfaces';
@@ -51,6 +52,7 @@ import { CreateOrUpdatePlatformDialogParams } from './create-or-update-platform-
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
+    NgxSkeletonLoaderModule,
     RouterModule
   ],
   selector: 'gf-admin-platform',
@@ -61,6 +63,7 @@ export class GfAdminPlatformComponent implements OnInit {
   public readonly locale = input(getLocale());
 
   protected dataSource = new MatTableDataSource<Platform>();
+
   protected readonly displayedColumns = [
     'icon',
     'name',
@@ -68,12 +71,15 @@ export class GfAdminPlatformComponent implements OnInit {
     'accounts',
     'actions'
   ];
+
+  protected isLoading = false;
   protected readonly pageSize = DEFAULT_PAGE_SIZE;
   protected platforms: Platform[];
 
   private readonly deviceType = computed(
     () => this.deviceDetectorService.deviceInfo().deviceType
   );
+
   private readonly paginator = viewChild.required(MatPaginator);
   private readonly sort = viewChild.required(MatSort);
 
@@ -149,6 +155,8 @@ export class GfAdminPlatformComponent implements OnInit {
   }
 
   private fetchPlatforms() {
+    this.isLoading = true;
+
     this.adminService
       .fetchPlatforms()
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -162,6 +170,8 @@ export class GfAdminPlatformComponent implements OnInit {
 
         this.dataService.updateInfo();
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }
diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.html b/apps/client/src/app/components/admin-tag/admin-tag.component.html
index 83f7b559d4..2e8750093a 100644
--- a/apps/client/src/app/components/admin-tag/admin-tag.component.html
+++ b/apps/client/src/app/components/admin-tag/admin-tag.component.html
@@ -141,6 +141,17 @@
   </table>
 </div>
 
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+}
+
 <mat-paginator
   [class.d-none]="dataSource.data.length <= pageSize"
   [hidePageSize]="true"
diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.ts b/apps/client/src/app/components/admin-tag/admin-tag.component.ts
index b08b144cf8..e46044d1e4 100644
--- a/apps/client/src/app/components/admin-tag/admin-tag.component.ts
+++ b/apps/client/src/app/components/admin-tag/admin-tag.component.ts
@@ -40,6 +40,7 @@ import {
   trashOutline
 } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfCreateOrUpdateTagDialogComponent } from './create-or-update-tag-dialog/create-or-update-tag-dialog.component';
 import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/interfaces/interfaces';
@@ -54,6 +55,7 @@ import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/int
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
+    NgxSkeletonLoaderModule,
     RouterModule
   ],
   selector: 'gf-admin-tag',
@@ -74,6 +76,8 @@ export class GfAdminTagComponent implements OnInit {
     'total',
     'actions'
   ];
+
+  protected isLoading = false;
   protected readonly isSystemTag = isSystemTag;
   protected readonly pageSize = DEFAULT_PAGE_SIZE;
   protected tags: TagWithAccountAndActivityCount[];
@@ -82,6 +86,7 @@ export class GfAdminTagComponent implements OnInit {
   private readonly deviceType = computed(
     () => this.deviceDetectorService.deviceInfo().deviceType
   );
+
   private readonly paginator = viewChild.required(MatPaginator);
   private readonly sort = viewChild.required(MatSort);
 
@@ -163,6 +168,8 @@ export class GfAdminTagComponent implements OnInit {
   }
 
   private fetchTags() {
+    this.isLoading = true;
+
     this.dataService
       .fetchTags()
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -185,6 +192,8 @@ export class GfAdminTagComponent implements OnInit {
 
         this.dataService.updateInfo();
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }