From 7f304247929d65f9665a6f35e618b577c6ff4468 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 17 Oct 2024 14:13:02 +0200
Subject: [PATCH] Feature/improve empty state in benchmarks of markets overview
 (#3939)

* Improve empty state

* Update changelog
---
 CHANGELOG.md                                      |  1 +
 .../home-market/home-market.component.ts          |  3 ---
 .../app/components/home-market/home-market.html   | 10 ----------
 .../components/home-market/home-market.module.ts  |  4 +---
 .../ui/src/lib/benchmark/benchmark.component.html | 15 +++++++++++++++
 libs/ui/src/lib/benchmark/benchmark.component.ts  |  5 +++++
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e15dbf994..852e4576e 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/home-market/home-market.component.ts b/apps/client/src/app/components/home-market/home-market.component.ts
index 3a42a9ebc..3480eaeb7 100644
--- a/apps/client/src/app/components/home-market/home-market.component.ts
+++ b/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();
       });
diff --git a/apps/client/src/app/components/home-market/home-market.html b/apps/client/src/app/components/home-market/home-market.html
index c362fdd18..2fcdb5716 100644
--- a/apps/client/src/app/components/home-market/home-market.html
+++ b/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>
diff --git a/apps/client/src/app/components/home-market/home-market.module.ts b/apps/client/src/app/components/home-market/home-market.module.ts
index bc35b4bef..b8e6582a5 100644
--- a/apps/client/src/app/components/home-market/home-market.module.ts
+++ b/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]
 })
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index ec92554de..8867e1c9e 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/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>
+}
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts
index 764d65c2c..22bc9a128 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/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',