implemented comments from review

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -11,7 +11,7 @@
             <div class="d-flex align-items-center">
               <gf-asset-profile-icon class="mr-1" [url]="element.url" />
               <div>
-                @if (isGhostfolioProvider(element)) {
+                @if (isGhostfolioDataProvider(element)) {
                   <a
                     class="align-items-center d-inline-flex"
                     target="_blank"
@@ -59,7 +59,7 @@
           <th *matHeaderCellDef class="px-1 py-2" mat-header-cell></th>
 
           <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
-            @if (isGhostfolioProvider(element)) {
+            @if (isGhostfolioDataProvider(element)) {
               @if (isGhostfolioApiKeyValid === true) {
                 <button
                   class="mx-1 no-min-width px-2"

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

@@ -39,11 +39,11 @@ import { GhostfolioPremiumApiDialogParams } from './ghostfolio-premium-api-dialo
 export class AdminSettingsComponent implements OnDestroy, OnInit {
   public dataSource = new MatTableDataSource<DataProviderInfo>();
   public defaultDateFormat: string;
+  public displayedColumns = ['name', 'actions'];
   public ghostfolioApiStatus: DataProviderGhostfolioStatusResponse;
   public isGhostfolioApiKeyValid: boolean;
-  public pricingUrl: string;
-  public displayedColumns = ['name', 'actions'];
   public isLoading = false;
+  public pricingUrl: string;
 
   private deviceType: string;
   private unsubscribeSubject = new Subject<void>();
@@ -122,8 +122,8 @@ export class AdminSettingsComponent implements OnDestroy, OnInit {
       });
   }
 
-  public isGhostfolioProvider(provider: DataProviderInfo): boolean {
-    return provider.name === 'Ghostfolio';
+  public isGhostfolioDataProvider(provider: DataProviderInfo): boolean {
+    return provider.name === 'GHOSTFOLIO';
   }
 
   public ngOnDestroy() {
@@ -133,6 +133,7 @@ export class AdminSettingsComponent implements OnDestroy, OnInit {
 
   private initialize() {
     this.isLoading = true;
+    this.dataSource = new MatTableDataSource();
 
     this.adminService
       .fetchAdminData()
@@ -143,6 +144,7 @@ export class AdminSettingsComponent implements OnDestroy, OnInit {
         });
 
         this.dataSource = new MatTableDataSource(filteredProviders);
+        this.isLoading = false;
 
         this.adminService
           .fetchGhostfolioDataProviderStatus(
@@ -151,9 +153,7 @@ export class AdminSettingsComponent implements OnDestroy, OnInit {
           .pipe(
             catchError(() => {
               this.isGhostfolioApiKeyValid = false;
-              this.isLoading = false;
               this.changeDetectorRef.markForCheck();
-
               return of(null);
             }),
             filter((status) => {
@@ -164,7 +164,6 @@ export class AdminSettingsComponent implements OnDestroy, OnInit {
           .subscribe((status) => {
             this.ghostfolioApiStatus = status;
             this.isGhostfolioApiKeyValid = true;
-            this.isLoading = false;
             this.changeDetectorRef.markForCheck();
           });
 

apps/client/src/app/components/admin-settings/admin-settings.module.ts

@@ -10,6 +10,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminSettingsComponent } from './admin-settings.component';
 
@@ -24,8 +25,9 @@ import { AdminSettingsComponent } from './admin-settings.component';
     MatButtonModule,
     MatCardModule,
     MatMenuModule,
-    RouterModule,
-    MatTableModule
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })