feat(client): resolve comments

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

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%'
+    }"
+  />
 }

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();
+  }
 }

apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts

@@ -0,0 +1,3 @@
+export interface DataProviderStatus {
+  isHealthy: boolean;
+}

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}`);
   }