Fix missing loading indicator in benchmark component

apps/client/src/app/components/markets/markets.component.ts

@@ -117,8 +117,13 @@ export class GfMarketsComponent implements OnInit {
     this.dataService
       .fetchBenchmarks()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(({ benchmarks }) => {
-        this.benchmarks.set(benchmarks);
+      .subscribe({
+        error: () => {
+          this.benchmarks.set([]);
+        },
+        next: ({ benchmarks }) => {
+          this.benchmarks.set(benchmarks);
+        }
       });
   }
 

apps/client/src/app/components/markets/markets.html

@@ -56,7 +56,7 @@
         [showSymbol]="false"
         [user]="user"
       />
-      @if (benchmarks()?.length > 0) {
+      @if ((benchmarks()?.length ?? 0) > 0) {
         <div
           class="gf-text-wrap-balance line-height-1 mt-3 text-center text-muted"
         >

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -216,7 +216,7 @@
   </table>
 </div>
 
-@if (isLoading) {
+@if (isLoading()) {
   <ngx-skeleton-loader
     animation="pulse"
     class="px-4 py-3"

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -63,7 +63,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
   templateUrl: './benchmark.component.html'
 })
 export class GfBenchmarkComponent {
-  public readonly benchmarks = input.required<Benchmark[]>();
+  public readonly benchmarks = input.required<Benchmark[] | undefined>();
   public readonly deviceType = input.required<string>();
   public readonly hasPermissionToDeleteItem = input<boolean>();
   public readonly locale = input(getLocale());
@@ -76,6 +76,7 @@ export class GfBenchmarkComponent {
   protected readonly sort = viewChild(MatSort);
 
   protected readonly dataSource = new MatTableDataSource<Benchmark>([]);
+
   protected readonly displayedColumns = computed(() => {
     return [
       ...(this.showIcon() ? ['icon'] : []),
@@ -89,7 +90,11 @@ export class GfBenchmarkComponent {
       'actions'
     ];
   });
-  protected isLoading = true;
+
+  protected readonly isLoading = computed(() => {
+    return !this.benchmarks();
+  });
+
   protected readonly isNumber = isNumber;
   protected readonly resolveMarketCondition = resolveMarketCondition;
   protected readonly round = round;
@@ -110,8 +115,6 @@ export class GfBenchmarkComponent {
         this.dataSource.sortingDataAccessor = getLowercase;
 
         this.dataSource.sort = this.sort() ?? null;
-
-        this.isLoading = false;
       }
     });