Bugfix/missing loading indicator in benchmarks table on markets page (#7634)

* Fix missing loading indicator in benchmark component

* Update changelog

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed the missing currency conversion of the dividends on the analysis page
+- Fixed the missing error state in the watchlist
+- Fixed the missing loading indicator in the benchmarks of the markets overview
 
 ## 3.51.0 - 2026-08-14
 

apps/client/src/app/components/home-watchlist/home-watchlist.component.ts

@@ -128,10 +128,17 @@ export class GfHomeWatchlistComponent implements OnInit {
     this.dataService
       .fetchWatchlist()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(({ watchlist }) => {
-        this.watchlist = watchlist;
+      .subscribe({
+        error: () => {
+          this.watchlist = [];
 
           this.changeDetectorRef.markForCheck();
+        },
+        next: ({ watchlist }) => {
+          this.watchlist = watchlist ?? [];
+
+          this.changeDetectorRef.markForCheck();
+        }
       });
   }
 

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

@@ -43,7 +43,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
   templateUrl: './markets.html'
 })
 export class GfMarketsComponent implements OnInit {
-  protected readonly benchmarks = signal<Benchmark[]>([]);
+  protected readonly benchmarks = signal<Benchmark[] | undefined>(undefined);
 
   protected readonly deviceType = computed(
     () => this.deviceDetectorService.deviceInfo().deviceType
@@ -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) {
         <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<Benchmark[]>();
   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,8 @@ export class GfBenchmarkComponent {
         this.dataSource.sortingDataAccessor = getLowercase;
 
         this.dataSource.sort = this.sort() ?? null;
-
-        this.isLoading = false;
+      } else {
+        this.dataSource.data = [];
       }
     });