Feature/improve markets overview (#1206)

* Improve markets overview

* Update changelog

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.html

@@ -1,13 +1,23 @@
-<div class="align-items-center d-flex flex-row">
-  <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji }}</div>
-  <div>
-    <div class="h4 mb-0">
-      <span class="mr-2">{{ fearAndGreedIndexText }}</span>
-      <small class="text-muted"
-        ><strong>{{ fearAndGreedIndex }}</strong
-        >/100</small
-      >
+<div class="position-relative">
+  <div class="align-items-center d-flex flex-row" [hidden]="!fearAndGreedIndex">
+    <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji }}</div>
+    <div>
+      <div class="h4 mb-0">
+        <span class="mr-2">{{ fearAndGreedIndexText }}</span>
+        <small class="text-muted"
+          ><strong>{{ fearAndGreedIndex }}</strong
+          >/100</small
+        >
+      </div>
+      <small class="d-block" i18n>Current Market Mood</small>
     </div>
-    <small class="d-block" i18n>Current Market Mood</small>
   </div>
+  <ngx-skeleton-loader
+    *ngIf="!fearAndGreedIndex"
+    animation="pulse"
+    class="position-absolute w-100"
+    [theme]="{
+      height: '100%'
+    }"
+  ></ngx-skeleton-loader>
 </div>

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.scss

@@ -1,3 +1,8 @@
 :host {
   display: block;
+
+  ngx-skeleton-loader {
+    bottom: 0;
+    top: 0;
+  }
 }

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { FearAndGreedIndexComponent } from './fear-and-greed-index.component';
 
 @NgModule({
   declarations: [FearAndGreedIndexComponent],
   exports: [FearAndGreedIndexComponent],
-  imports: [CommonModule]
+  imports: [CommonModule, NgxSkeletonLoaderModule]
 })
 export class GfFearAndGreedIndexModule {}

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

@@ -20,7 +20,6 @@
       <gf-fear-and-greed-index
         class="d-flex justify-content-center"
         [fearAndGreedIndex]="fearAndGreedIndex"
-        [hidden]="isLoading"
       ></gf-fear-and-greed-index>
     </div>
   </div>