Feature/improve empty state in benchmarks of markets overview (#3939)

* Improve empty state

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the empty state in the benchmarks of the markets overview
 - Disabled the text hover effect in the chart of the holdings tab on the home page (experimental)
 - Improved the usability to customize the rule thresholds in the _X-ray_ section by introducing units (experimental)
 - Switched to adjusted market prices (splits and dividends) in the get historical functionality of the _EOD Historical Data_ service

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

@@ -29,7 +29,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public historicalDataItems: HistoricalDataItem[];
   public info: InfoItem;
-  public isLoading = true;
   public readonly numberOfDays = 365;
   public user: User;
 
@@ -43,7 +42,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
   ) {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
     this.info = this.dataService.fetchInfo();
-    this.isLoading = true;
 
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -89,7 +87,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ benchmarks }) => {
         this.benchmarks = benchmarks;
-        this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();
       });

apps/client/src/app/components/home-market/home-market.html

@@ -36,16 +36,6 @@
         [locale]="user?.settings?.locale || undefined"
         [user]="user"
       />
-      @if (isLoading) {
-        <ngx-skeleton-loader
-          animation="pulse"
-          class="px-2 py-3"
-          [theme]="{
-            height: '1.5rem',
-            width: '100%'
-          }"
-        />
-      }
     </div>
   </div>
 </div>

apps/client/src/app/components/home-market/home-market.module.ts

@@ -4,7 +4,6 @@ import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { HomeMarketComponent } from './home-market.component';
 
@@ -15,8 +14,7 @@ import { HomeMarketComponent } from './home-market.component';
     CommonModule,
     GfBenchmarkComponent,
     GfFearAndGreedIndexModule,
-    GfLineChartComponent,
-    NgxSkeletonLoaderModule
+    GfLineChartComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

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

@@ -122,3 +122,18 @@
     "
   ></tr>
 </table>
+
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+} @else if (benchmarks?.length === 0) {
+  <div class="p-3 text-center text-muted">
+    <small i18n>No data available</small>
+  </div>
+}

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

@@ -49,6 +49,7 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   @Input() user: User;
 
   public displayedColumns = ['name', 'date', 'change', 'marketCondition'];
+  public isLoading = true;
   public resolveMarketCondition = resolveMarketCondition;
   public translate = translate;
 
@@ -76,6 +77,10 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
+    if (this.benchmarks) {
+      this.isLoading = false;
+    }
+
     if (this.user?.settings?.isExperimentalFeatures) {
       this.displayedColumns = [
         'name',