Merge pull request #1315 from nymkappa/feature/mining-dashboard-skeleton

Add skeleton in the mining dashboard page

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -25,13 +25,13 @@
     </form>
   </div>
 
-  <div *ngIf="(hashrateObservable$ | async) && !tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
+  <div *ngIf="!tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
   
-  <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly">
+  <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly" style="min-height: 295px">
     <table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''">
       <thead>
         <tr>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -15,7 +15,7 @@ import { selectPowerOfTen } from 'src/app/bitcoin.utils';
   styles: [`
     .loadingGraphs {
       position: absolute;
-      top: 38%;
+      top: 50%;
       left: calc(50% - 15px);
       z-index: 100;
     }

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -25,7 +25,7 @@
     </form>
   </div>
 
-  <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
+  <div [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -2,11 +2,12 @@
 
   <div class="row row-cols-1 row-cols-md-2">
 
+    <!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
     <div class="col">
       <div class="main-title">Reward stats</div>
       <div class="card" style="height: 123px">
         <div class="card-body more-padding">
-          <div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats">
+          <div class="fee-estimation-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
             <div class="item">
               <h5 class="card-title" i18n="">Miners Reward</h5>
               <div class="card-text">
@@ -34,6 +35,31 @@
         </div>
       </div>
     </div>
+    <ng-template #loadingReward>
+      <div class="fee-estimation-container">
+        <div class="item">
+          <h5 class="card-title" i18n="">Miners Reward</h5>
+          <div class="card-text">
+            <div class="skeleton-loader"></div>
+            <div class="skeleton-loader"></div>
+          </div>
+        </div>
+        <div class="item">
+          <h5 class="card-title" i18n="">Reward Per Tx</h5>
+          <div class="card-text">
+            <div class="skeleton-loader"></div>
+            <div class="skeleton-loader"></div>
+          </div>
+        </div>
+        <div class="item">
+          <h5 class="card-title" i18n="">Average Fee</h5>
+          <div class="card-text">
+            <div class="skeleton-loader"></div>
+            <div class="skeleton-loader"></div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
 
     <!-- difficulty adjustment -->
     <div class="col">

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -56,39 +56,22 @@
   padding-bottom: 3px;
 }
 
-.general-stats {
+.fee-estimation-container {
-  min-height: 56px;
-  display: block;
-  @media (min-width: 485px) {
   display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
     flex-direction: row;
   }
-  h5 {
-    margin-bottom: 10px;
-  }
   .item {
-    width: 50%;
+    max-width: 150px;
-    margin: 0px auto 10px;
+    margin: 0;
-    display: inline-block;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }
+    &:first-child{
+      display: none;
       @media (min-width: 485px) {
-      margin: 0px auto 10px;
-    }
-    @media (min-width: 785px) {
-      margin: 0px auto 0px;
-    }
-    &:last-child {
-      margin: 0px auto 0px;
-    }
-    &:nth-child(2) {
-      order: 2;
-      @media (min-width: 485px) {
-        order: 3;
-      }
-    }
-    &:nth-child(3) {
-      order: 3;
-      @media (min-width: 485px) {
-        order: 2;
         display: block;
       }
       @media (min-width: 768px) {
@@ -98,48 +81,37 @@
         display: block;
       }
     }
-    .card-title {
+    &:last-child {
-      font-size: 1rem;
+      margin-bottom: 0;
-      color: #4a68b9;
     }
-    .card-text {
+    .card-text span {
-      font-size: 18px;
-      span {
       color: #ffffff66;
       font-size: 12px;
+      top: 0px;
     }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
     }
   }
 }
 
-.difficulty-adjustment-container {
+.skeleton-loader {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  height: 76px;
-  .shared-block {
-    color: #ffffff66;
-    font-size: 12px;
-  }
-  .item {
-    padding: 0 5px;
   width: 100%;
-    &:nth-child(1) {
+  display: block;
-      display: none;
+  &:first-child {
-      @media (min-width: 485px) {
+    max-width: 90px;
-        display: table-cell;
+    margin: 15px auto 3px;
   }
-      @media (min-width: 768px) {
+  &:last-child {
-        display: none;
+    margin: 10px auto 3px;
-      }
+    max-width: 55px;
-      @media (min-width: 992px) {
-        display: table-cell;
-      }
-    }
-  }
-  .card-text {
-    font-size: 22px;
-    margin-top: -9px;
-    position: relative;
   }
 }

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -1,6 +1,7 @@
 <div [class]="widget === false ? 'container-xl' : ''">
 
-  <div class="pool-distribution" *ngIf="widget && (miningStatsObservable$ | async) as miningStats">
+  <div *ngIf="widget">
+    <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
       <div class="item">
         <h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
         <p class="card-text">
@@ -20,6 +21,7 @@
         </p>
       </div>
     </div>
+  </div>
 
   <div [class]="widget ? 'chart-widget' : 'chart'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
@@ -96,3 +98,27 @@
   </table>
 
 </div>
+
+
+<ng-template #loadingReward>
+  <div class="pool-distribution">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -103,3 +103,10 @@
     }
   }
 }
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  max-width: 80px;
+  margin: 15px auto 3px;
+}