diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f1102d92..56ac6210d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Set up a performance logging service +- Added a loading indicator to the queue jobs table in the admin control panel +- Added a loading indicator to the users table in the admin control panel - Added the attribute `mode` to the scraper configuration to get quotes instantly ### Changed diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts b/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts index 820b3651d..e828049bc 100644 --- a/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts +++ b/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts @@ -51,6 +51,7 @@ export class AdminJobsComponent implements OnDestroy, OnInit { 'status', 'actions' ]; + public isLoading = false; public statusFilterOptions = QUEUE_JOB_STATUS_LIST; public user: User; @@ -138,12 +139,16 @@ export class AdminJobsComponent implements OnDestroy, OnInit { } private fetchJobs(aStatus?: JobStatus[]) { + this.isLoading = true; + this.adminService .fetchJobs({ status: aStatus }) .pipe(takeUntil(this.unsubscribeSubject)) .subscribe(({ jobs }) => { this.dataSource = new MatTableDataSource(jobs); + this.isLoading = false; + this.changeDetectorRef.markForCheck(); }); } diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.html b/apps/client/src/app/components/admin-jobs/admin-jobs.html index 9ea2097e2..e194b2b37 100644 --- a/apps/client/src/app/components/admin-jobs/admin-jobs.html +++ b/apps/client/src/app/components/admin-jobs/admin-jobs.html @@ -183,6 +183,16 @@ + @if (isLoading) { + + } diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts b/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts index fe717b904..cca66a04a 100644 --- a/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts +++ b/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts @@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; import { MatSelectModule } from '@angular/material/select'; import { MatTableModule } from '@angular/material/table'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { AdminJobsComponent } from './admin-jobs.component'; @@ -17,6 +18,7 @@ import { AdminJobsComponent } from './admin-jobs.component'; MatMenuModule, MatSelectModule, MatTableModule, + NgxSkeletonLoaderModule, ReactiveFormsModule ], schemas: [CUSTOM_ELEMENTS_SCHEMA] diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts index 0a66977bf..4a419dd6c 100644 --- a/apps/client/src/app/components/admin-users/admin-users.component.ts +++ b/apps/client/src/app/components/admin-users/admin-users.component.ts @@ -32,6 +32,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit { public hasPermissionForSubscription: boolean; public hasPermissionToImpersonateAllUsers: boolean; public info: InfoItem; + public isLoading = false; public user: User; private unsubscribeSubject = new Subject(); @@ -142,12 +143,16 @@ export class AdminUsersComponent implements OnDestroy, OnInit { } private fetchAdminData() { + this.isLoading = true; + this.adminService .fetchAdminData() .pipe(takeUntil(this.unsubscribeSubject)) .subscribe(({ users }) => { this.dataSource = new MatTableDataSource(users); + this.isLoading = false; + this.changeDetectorRef.markForCheck(); }); } diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html index 25ab9053d..b65b7c821 100644 --- a/apps/client/src/app/components/admin-users/admin-users.html +++ b/apps/client/src/app/components/admin-users/admin-users.html @@ -245,6 +245,16 @@ > + @if (isLoading) { + + } diff --git a/apps/client/src/app/components/admin-users/admin-users.module.ts b/apps/client/src/app/components/admin-users/admin-users.module.ts index 3f4e9f2f7..fcf25c8b5 100644 --- a/apps/client/src/app/components/admin-users/admin-users.module.ts +++ b/apps/client/src/app/components/admin-users/admin-users.module.ts @@ -6,6 +6,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; import { MatTableModule } from '@angular/material/table'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { AdminUsersComponent } from './admin-users.component'; @@ -18,7 +19,8 @@ import { AdminUsersComponent } from './admin-users.component'; GfValueComponent, MatButtonModule, MatMenuModule, - MatTableModule + MatTableModule, + NgxSkeletonLoaderModule ], schemas: [CUSTOM_ELEMENTS_SCHEMA] })