From 9e71f1a6838c18c64294ae9696d0c700e8984b26 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 22 Sep 2020 12:50:12 +0700
Subject: [PATCH] Improved dashboard loading indicators.

---
 .../app/dashboard/dashboard.component.html    | 30 +++++++++++--------
 .../app/dashboard/dashboard.component.scss    |  4 +++
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index c11627005..4dbafedc2 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -2,12 +2,12 @@
 
 <div class="container-xl">
 
-  <div class="row row-cols-1 row-cols-md-2" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
+  <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <div class="col mb-4">
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title mempoolSize">Mempool size</h5>
-          <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
+          <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
         </div>
       </div>
     </div>
@@ -15,7 +15,7 @@
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5>
-          <p class="card-text">{{ mempoolInfoData.memPoolInfo.size | number }}</p>
+          <p class="card-text" *ngIf="mempoolInfoData.value; else loading">{{ mempoolInfoData.value.memPoolInfo.size | number }}</p>
         </div>
       </div>
     </div>
@@ -23,13 +23,15 @@
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title txWeightPerSecond">Tx weight per second</h5>
-            <span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync">
-              &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
-            </span>
-            <ng-template #inSync>
-              <div class="progress sub-text">
-                <div class="progress-bar {{ mempoolInfoData.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} vB/s</div>
-              </div>
+            <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
+              <span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
+                &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
+              </span>
+              <ng-template #inSync>
+                <div class="progress sub-text">
+                  <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
+                </div>
+              </ng-template>
             </ng-template>
         </div>
       </div>
@@ -38,7 +40,7 @@
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title txPerSecond">Difficulty epoch</h5>
-          <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData">
+          <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
             <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
             <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
             <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
@@ -48,4 +50,8 @@
     </div>
   </div>
 
-</div>
\ No newline at end of file
+</div>
+
+<ng-template #loading>
+  <div class="skeleton-loader"></div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index efd762c7a..a6d7039ac 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -34,3 +34,7 @@
 .bg-warning {
   background-color: #b58800 !important;
 }
+
+.skeleton-loader {
+  width: 200px;
+}