From 4d5580eabbbeb0c33c61ed7a5d38e1c5754845a6 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 11 Mar 2020 16:06:11 +0700
Subject: [PATCH] Replace some spinners with skeleton loaders.

---
 .../components/address/address.component.html | 16 ++++-
 .../components/address/address.component.scss |  4 --
 .../app/components/block/block.component.html | 25 ++++---
 .../transaction/transaction.component.html    | 65 +++++++++++++------
 .../transactions-list.component.scss          |  4 --
 frontend/src/styles.scss                      |  6 +-
 6 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 8ae8b478b..74dd49eac 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -48,8 +48,20 @@
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
-        <div class="spinner-border"></div>
-        <br><br>
+        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+          <span class="skeleton-loader"></span>
+        </div>
+
+        <div class="header-bg box">
+          <div class="row" style="height: 107px;">
+            <div class="col-sm">
+              <span class="skeleton-loader"></span>
+            </div>
+            <div class="col-sm">
+              <span class="skeleton-loader"></span>
+            </div>
+          </div>
+        </div>
       </ng-template>
     </div>
 
diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss
index e6fa82d40..c5961e428 100644
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@@ -1,7 +1,3 @@
-.header-bg {
-  font-size: 14px;
-}
-
 .qr-wrapper {
   background-color: #FFF;
   padding: 10px;
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 84532ec84..178fc19b6 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -90,8 +90,22 @@
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
-        <div class="spinner-border"></div>
-        <br><br>
+
+        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+          <span class="skeleton-loader"></span>
+        </div>
+
+        <div class="header-bg box">
+          <div class="row" style="height: 107px;">
+            <div class="col-sm">
+              <span class="skeleton-loader"></span>
+            </div>
+            <div class="col-sm">
+              <span class="skeleton-loader"></span>
+            </div>
+          </div>
+        </div>
+        
       </ng-template>
     </div>
 
@@ -141,13 +155,6 @@
         </div>
       </div>
     </div>
-
-    <br>
-    
-    <div class="text-center">
-      <div class="spinner-border"></div>
-      <br><br>
-    </div>
   </ng-template>
 
   <ng-template [ngIf]="error">
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 1ce26156b..409a19e6e 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -100,26 +100,55 @@
 
     <h2>Details</h2>
     <div class="box">
-      <div class="row">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td>Size</td>
-                <td>{{ tx.size | bytes: 2 }}</td>
-              </tr>
-              <tr>
-                <td>Weight</td>
-                <td>{{ tx.weight | wuBytes: 2 }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <tr>
+            <td>Size</td>
+            <td>{{ tx.size | bytes: 2 }}</td>
+          </tr>
+          <tr>
+            <td>Weight</td>
+            <td>{{ tx.weight | wuBytes: 2 }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
   </ng-template>
 
   <ng-template [ngIf]="isLoadingTx && !error">
 
+    <div class="box">
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <tr>
+            <td><span class="skeleton-loader"></span></td>
+            <td><span class="skeleton-loader"></span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <br>
+
+    <h2>Inputs & Outputs</h2>
+
+    <div class="box">
+      <div class="row">
+        <table class="table table-borderless table-striped">
+          <tbody>
+            <tr>
+              <td><span class="skeleton-loader"></span></td>
+              <td><span class="skeleton-loader"></span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <br>
+
+    <h2>Details</h2>
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>
@@ -135,12 +164,6 @@
       </table>
     </div>
 
-    <br>
-
-    <div class="text-center">
-      <div class="spinner-border"></div>
-      <br><br>
-    </div>
   </ng-template>
 
   <ng-template [ngIf]="error">
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index c1fd85659..282bb103b 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -1,7 +1,3 @@
-.header-bg {
-  font-size: 14px;
-}
-
 .arrow-td {
 	width: 22px;
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index e0698a4e8..2f2574cb8 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -328,4 +328,8 @@ tr {
   .md-inline {
     display: inline-block;
   }
-}
\ No newline at end of file
+}
+
+.header-bg {
+  font-size: 14px;
+}