Feature/auto-refresh user table in admin control panel every 30s (#6954)

* Auto-refresh user table

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added an automatic refresh every 30 seconds to the users table in the admin control panel
+
 ## 3.7.0 - 2026-06-02
 
 ### Added

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

@@ -59,8 +59,10 @@ import {
   personOutline,
   trashOutline
 } from 'ionicons/icons';
+import ms from 'ms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { interval } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 
 @Component({
@@ -184,6 +186,15 @@ export class GfAdminUsersComponent implements OnInit {
 
   public ngOnInit() {
     this.fetchUsers();
+
+    interval(ms('30 seconds'))
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.fetchUsers({
+          pageIndex: this.paginator().pageIndex,
+          showLoading: false
+        });
+      });
   }
 
   protected formatDistanceToNow(aDateString: string) {
@@ -267,8 +278,13 @@ export class GfAdminUsersComponent implements OnInit {
     );
   }
 
-  private fetchUsers({ pageIndex }: { pageIndex: number } = { pageIndex: 0 }) {
+  private fetchUsers({
-    this.isLoading = true;
+    pageIndex = 0,
+    showLoading = true
+  }: { pageIndex?: number; showLoading?: boolean } = {}) {
+    if (showLoading) {
+      this.isLoading = true;
+    }
 
     if (pageIndex === 0 && this.paginator()) {
       this.paginator().pageIndex = 0;
@@ -281,7 +297,7 @@ export class GfAdminUsersComponent implements OnInit {
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ count, users }) => {
-        this.dataSource = new MatTableDataSource(users);
+        this.dataSource.data = users;
         this.totalItems = count;
 
         this.isLoading = false;