From 735c2ba58779f15aed6cc56e9eddafa8faa2088b Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Mon, 26 Jul 2021 20:47:08 -0300
Subject: [PATCH] Bugfix: Dashboard preloading skeleton. (#668)

* Change green color.

* Fix dashboard preloading components.
---
 .../fees-box/fees-box.component.scss          |  3 +-
 .../app/dashboard/dashboard.component.html    | 24 +++++----
 .../app/dashboard/dashboard.component.scss    | 54 ++++++++++++-------
 .../src/app/dashboard/dashboard.component.ts  |  9 ++--
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss
index f402f9295..460db5e4b 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -73,11 +73,12 @@
   .skeleton-loader {
     width: 100%;
     display: block;
-    margin: 9px auto;
     &:first-child {
       max-width: 90px;
+      margin: 15px auto 3px;
     }
     &:last-child {
+      margin: 10px auto 3px;
       max-width: 55px;
     }
   }
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 804de5ffb..611e00866 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -142,12 +142,16 @@
 
 </div>
 
+<ng-template #loadingTransactions>
+  <div class="skeleton-loader skeleton-loader-transactions"></div>
+</ng-template>
+
 <ng-template #loading>
   <div class="skeleton-loader"></div>
 </ng-template>
 
-<ng-template #loadingsmall>
-  <span class="skeleton-loader" style="width: 80%;"></span>
+<ng-template #loadingbig>
+  <span class="skeleton-loader skeleton-loader-big" ></span>
 </ng-template>
 
 <ng-template #emptyBlock>
@@ -161,19 +165,19 @@
     <div class="item">
       <h5 *ngIf="!mempoolInfoData.value || mempoolInfoData.value.memPoolInfo.mempoolminfee === 0.00001 else purgingText" class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Minimum fee</h5>
       <ng-template #purgingText><h5 class="card-title" i18n="dashboard.purging|Purgin below fee">Purging</h5></ng-template>
-      <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
+      <p class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loading">
         <ng-template [ngIf]="mempoolInfoData.value.memPoolInfo.mempoolminfee > 0.00001">&lt; </ng-template>{{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} <span><ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container></span>
       </p>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
-      <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
+      <p class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loading">
         {{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
       </p>
     </div>
     <div class="item bar">
       <h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory usage</h5>
-      <div class="card-text" *ngIf="mempoolInfoData.value; else loadingsmall">
+      <div class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loadingbig">
         <div class="progress">
           <div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div>
           <div class="progress-text"><span [innerHTML]="mempoolInfoData.value.memPoolInfo.usage | bytes"></span> / <span [innerHTML]="mempoolInfoData.value.memPoolInfo.maxmempool | bytes"></span></div>
@@ -185,7 +189,7 @@
 
 <ng-template #txPerSecond let-mempoolInfoData>
   <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
-  <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
+  <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [ngIfElse]="loadingTransactions">
     <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
       &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
     </span>
@@ -203,7 +207,7 @@
   <div class="card-wrapper">
     <div class="card">
       <div class="card-body more-padding">
-        <div class="difficulty-adjustment-container" *ngIf="(difficultyEpoch$ | async) as epochData; else loadingDifficulty">
+        <div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty">
           <div class="item">
             <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
             <div class="card-text">
@@ -222,7 +226,8 @@
               <ng-template #arrowDownDifficulty >
                 <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
               </ng-template>
-              {{ epochData.change | absolute | number: '1.2-2' }} <span class="symbol">%</span>
+              {{ epochData.change | absolute | number: '1.2-2' }} 
+              <span class="symbol">%</span>
             </div>
             <div class="symbol">
               <span i18n="difficulty-box.previous">Previous</span>: 
@@ -233,7 +238,8 @@
                 <ng-template #arrowDownPreviousDifficulty >
                   <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
                 </ng-template>
-                {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %</div>
+                {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
+            </div>
           </div>
           <div class="item">
             <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 812a7c9d2..37a37d529 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -31,7 +31,7 @@
   width: 100%;
   background-color: #2d3348;
   height: 1.1rem;
-  max-width: 130px;
+  max-width: 180px;
 }
 
 .bg-warning {
@@ -117,6 +117,15 @@
       margin: 0px auto 0px;
     }
   }
+  .skeleton-loader {
+    width: 100%;
+    max-width: 100px;
+    display: block;
+    margin: 18px auto 0;
+  }
+  .skeleton-loader-big {
+    max-width: 180px;
+  }
 }
 
 .latest-transactions {
@@ -160,6 +169,13 @@
     text-align: right;
   }
 }
+.skeleton-loader-transactions {
+  max-width: 250px;
+  position: relative;
+  top: 2px;
+  margin-bottom: -3px;
+  height: 18px;
+}
 
 .lastest-blocks-table {
   width: 100%;
@@ -219,6 +235,7 @@
 .small-bar {
   height: 8px;
   top: -4px;
+  max-width: 120px;
 }
 
 .difficulty-adjustment-container {
@@ -233,7 +250,7 @@
   .item {    
     padding: 0 5px;
     width: 100%;
-    &:nth-child(1){
+    &:nth-child(1) {
       display: none;
       @media (min-width: 485px) {
         display: table-cell;
@@ -283,26 +300,26 @@
       margin-bottom: 0;
     }
   }
-}
-
-.loading-container{
-  min-height: 76px;
-}
-
-.card-text {
-  .skeleton-loader {
-    width: 100%;
-    display: block;
-    margin: 7px auto;
-    &:first-child {
-      max-width: 80px;
-    }
-    &:last-child {
-      max-width: 110px;
+  .card-text {
+    .skeleton-loader {
+      width: 100%;
+      display: block;
+      &:first-child {
+        margin: 14px auto 0;
+        max-width: 80px;
+      }
+      &:last-child {
+        margin: 10px auto 0;
+        max-width: 120px;
+      }
     }
   }
 }
 
+.loading-container {
+  min-height: 76px;
+}
+
 .main-title {
   position: relative;
   color: #ffffff91;
@@ -313,6 +330,7 @@
   text-align: center;
   padding-bottom: 3px;
 }
+
 .card-wrapper {
   .card {
     height: auto !important;
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 9e28e96ed..f6424cc62 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -62,6 +62,7 @@ export class DashboardComponent implements OnInit {
   mempoolTransactionsWeightPerSecondData: any;
   mempoolStats$: Observable<MempoolStatsData>;
   transactionsWeightPerSecondOptions: any;
+  isLoadingWebSocket$: Observable<boolean>;
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -73,6 +74,8 @@ export class DashboardComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+
+    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
     this.seoService.resetTitle();
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
     this.network$ = merge(of(''), this.stateService.networkChanged$);
@@ -113,7 +116,7 @@ export class DashboardComponent implements OnInit {
         };
       })
     );
-
+    
     this.difficultyEpoch$ = timer(0, 1000)
       .pipe(
         switchMap(() => combineLatest([
@@ -141,13 +144,13 @@ export class DashboardComponent implements OnInit {
 
           let colorAdjustments = '#dc3545';
           if (difficultyChange >= 0) {
-            colorAdjustments = '#299435';
+            colorAdjustments = '#3bcc49';
           }
 
           let colorPreviousAdjustments = '#dc3545';
           if(previousRetarget){
             if (previousRetarget >= 0) {
-              colorPreviousAdjustments = '#299435';
+              colorPreviousAdjustments = '#3bcc49';
             }
             if (previousRetarget === 0) {
               colorPreviousAdjustments = '#ffffff66';