From 46d7141c70356a85d609c724bf19fc319b64a58f Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 22 Jun 2025 13:29:59 +0700
Subject: [PATCH] feat(client): resolve comments

---
 CHANGELOG.md                                  |  4 ++++
 .../data-provider-status.component.html       |  9 ++++++++
 .../data-provider-status.component.ts         | 22 ++++++++++++++-----
 .../interfaces/interfaces.ts                  |  3 +++
 apps/client/src/app/services/data.service.ts  |  2 +-
 5 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d87d850dc..402dab7a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Extended the data providers management of the admin control panel by the online status
+
 ### Changed
 
 - Migrated the `@ghostfolio/ui/value` component to control flow
diff --git a/apps/client/src/app/components/data-provider-status/data-provider-status.component.html b/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
index e5eae16cf..c11ea1fe5 100644
--- a/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
+++ b/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
@@ -4,4 +4,13 @@
   } @else {
     <span class="text-danger" i18n>Offline</span>
   }
+} @else {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
 }
diff --git a/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts b/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
index c9a945cce..f19f90743 100644
--- a/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
+++ b/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
@@ -5,22 +5,28 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
+  OnDestroy,
   OnInit
 } from '@angular/core';
 import type { DataSource } from '@prisma/client';
-import { catchError, map, type Observable, of } from 'rxjs';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { catchError, map, type Observable, of, Subject, takeUntil } from 'rxjs';
+
+import { DataProviderStatus } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [CommonModule, NgxSkeletonLoaderModule],
   selector: 'gf-data-provider-status',
   standalone: true,
   templateUrl: './data-provider-status.component.html'
 })
-export class GfDataProviderStatusComponent implements OnInit {
+export class GfDataProviderStatusComponent implements OnDestroy, OnInit {
   @Input() dataSource: DataSource;
 
-  public status$: Observable<{ isHealthy: boolean }>;
+  public status$: Observable<DataProviderStatus>;
+
+  private unsubscribeSubject = new Subject<void>();
 
   public constructor(private dataService: DataService) {}
 
@@ -29,7 +35,13 @@ export class GfDataProviderStatusComponent implements OnInit {
       .fetchDataProviderHealth(this.dataSource)
       .pipe(
         map(() => ({ isHealthy: true })),
-        catchError(() => of({ isHealthy: false }))
+        catchError(() => of({ isHealthy: false })),
+        takeUntil(this.unsubscribeSubject)
       );
   }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
 }
diff --git a/apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts b/apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts
new file mode 100644
index 000000000..2c8071899
--- /dev/null
+++ b/apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts
@@ -0,0 +1,3 @@
+export interface DataProviderStatus {
+  isHealthy: boolean;
+}
diff --git a/apps/client/src/app/services/data.service.ts b/apps/client/src/app/services/data.service.ts
index fdc6274cf..9517ff271 100644
--- a/apps/client/src/app/services/data.service.ts
+++ b/apps/client/src/app/services/data.service.ts
@@ -380,7 +380,7 @@ export class DataService {
     return this.http.get<BenchmarkResponse>('/api/v1/benchmarks');
   }
 
-  public fetchDataProviderHealth(dataSource: DataSource): Observable<Object> {
+  public fetchDataProviderHealth(dataSource: DataSource) {
     return this.http.get(`/api/v1/health/data-provider/${dataSource}`);
   }