Refactoring

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

@@ -90,7 +90,12 @@
             <ng-container i18n>Status</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
-            <gf-data-provider-status [dataSource]="element.dataSource" />
+            @if (
+              !isGhostfolioDataProvider(element) ||
+              isGhostfolioApiKeyValid === true
+            ) {
+              <gf-data-provider-status [dataSource]="element.dataSource" />
+            }
           </td>
         </ng-container>
 
@@ -110,24 +115,25 @@
         <ng-container matColumnDef="usage">
           <th *matHeaderCellDef class="px-1 py-2" mat-header-cell></th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
-            @if (isGhostfolioDataProvider(element)) {
+            @if (
-              @if (isGhostfolioApiKeyValid === true) {
+              isGhostfolioDataProvider(element) &&
-                <mat-progress-bar
+              isGhostfolioApiKeyValid === true
-                  mode="determinate"
+            ) {
-                  [value]="
+              <mat-progress-bar
-                    100 -
+                mode="determinate"
-                    (ghostfolioApiStatus.dailyRequests /
+                [value]="
-                      ghostfolioApiStatus.dailyRequestsMax) *
+                  100 -
-                      100
+                  (ghostfolioApiStatus.dailyRequests /
-                  "
+                    ghostfolioApiStatus.dailyRequestsMax) *
-                />
+                    100
-                <small class="text-muted">
+                "
-                  {{ ghostfolioApiStatus.dailyRequests }}
+              />
-                  <ng-container i18n>of</ng-container>
+              <small class="text-muted">
-                  {{ ghostfolioApiStatus.dailyRequestsMax }}
+                {{ ghostfolioApiStatus.dailyRequests }}
-                  <ng-container i18n>daily requests</ng-container>
+                <ng-container i18n>of</ng-container>
-                </small>
+                {{ ghostfolioApiStatus.dailyRequestsMax }}
-              }
+                <ng-container i18n>daily requests</ng-container>
+              </small>
             }
           </td>
         </ng-container>

apps/client/src/app/components/data-provider-status/data-provider-status.component.html

@@ -5,5 +5,11 @@
     <span class="text-danger" i18n>Offline</span>
   }
 } @else {
-  <ngx-skeleton-loader animation="pulse" [theme]="{ height: '1rem' }" />
+  <ngx-skeleton-loader
+    animation="pulse"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
 }

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

@@ -34,8 +34,12 @@ export class GfDataProviderStatusComponent implements OnDestroy, OnInit {
     this.status$ = this.dataService
       .fetchDataProviderHealth(this.dataSource)
       .pipe(
-        map(() => ({ isHealthy: true })),
+        catchError(() => {
-        catchError(() => of({ isHealthy: false })),
+          return of({ isHealthy: false });
+        }),
+        map(() => {
+          return { isHealthy: true };
+        }),
         takeUntil(this.unsubscribeSubject)
       );
   }