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
>
+
+ @if (isLoading) {
+
+ }