From 71d500d750bc380a4a9ba296473f99f8b4fccf20 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 8 Mar 2022 18:58:19 +0100
Subject: [PATCH] Fix pool detail page layout - add loading skeleton

---
 .../app/components/pool/pool.component.html   | 67 ++++++++++++++++---
 .../app/components/pool/pool.component.scss   | 11 +++
 .../src/app/components/pool/pool.component.ts |  9 +++
 3 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index 66b3db5e3..7be7c220c 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -1,7 +1,7 @@
 <div class="container">
 
-  <div *ngIf="poolStats$ | async as poolStats">
-    <h1 class="m-0">
+  <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
+    <h1 class="m-0 mb-2">
       <img width="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'"
         class="mr-3">
       {{ poolStats.pool.name }}
@@ -54,27 +54,27 @@
     <div class="spinner-border text-light"></div>
   </div>
 
-  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
+  <table *ngIf="blocks$ | async as blocks" class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
     [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
     <thead>
       <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
       <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
       <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
-      <th style="width: 10%;" i18n="latest-blocks.reward">Reward</th>
-      <th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
+      <th class="text-right" style="width: 10%; padding-right: 30px" i18n="latest-blocks.reward">Reward</th>
+      <th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px" i18n="latest-blocks.transactions">Transactions</th>
       <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
     </thead>
-    <tbody *ngIf="blocks$ | async as blocks">
+    <tbody>
       <tr *ngFor="let block of blocks">
         <td><a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a></td>
         <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
         <td>
           <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
         </td>
-        <td class="">
+        <td class="text-right" style="padding-right: 30px">
           <app-amount [satoshis]="block['reward']" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
         </td>
-        <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
+        <td class="d-none d-lg-block text-right" style="padding-right: 40px">{{ block.tx_count | number }}</td>
         <td>
           <div class="progress">
             <div class="progress-bar progress-mempool" role="progressbar"
@@ -86,4 +86,53 @@
     </tbody>
   </table>
 
-</div>
\ No newline at end of file
+</div>
+
+<ng-template #loadingMain>
+  <div>
+    <h1 class="m-0 mb-2">
+      <img width="50" src="./resources/mining-pools/default.svg" class="mr-3">
+      <div class="skeleton-loader"></div>
+    </h1>
+
+    <div class="box">
+      <div class="row">
+        <div class="col-lg-9">
+          <table class="table table-borderless table-striped" style="table-layout: fixed;">
+            <tbody>
+              <tr>
+                <td class="col-4 col-lg-3">Addresses</td>
+                <td class="text-truncate">
+                  <div class="scrollable">
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+                <ng-template #noaddress>
+                  <td>~</td>
+                </ng-template>
+              </tr>
+              <tr>
+                <td class="col-4 col-lg-3">Coinbase Tags</td>
+                <td class="text-truncate"><div class="skeleton-loader"></div></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-lg-3">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td class="col-4 col-lg-8">Mined Blocks</td>
+                <td class="text-left"><div class="skeleton-loader"></div></td>
+              </tr>
+              <tr>
+                <td class="col-4 col-lg-8">Empty Blocks</td>
+                <td class="text-left"><div class="skeleton-loader"></div></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 65f16b6b8..b7c496995 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -37,4 +37,15 @@ div.scrollable {
   padding: 0;
   overflow: auto;
   max-height: 100px;
+}
+
+.skeleton-loader {
+  width: 100%;
+  max-width: 90px;
+  margin: 15px auto 3px;
+}
+
+.table {
+  margin: 0px auto;
+  max-width: 900px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 282febf2f..0e0e116dd 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -13,6 +13,14 @@ import { formatNumber } from '@angular/common';
   selector: 'app-pool',
   templateUrl: './pool.component.html',
   styleUrls: ['./pool.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PoolComponent implements OnInit {
@@ -48,6 +56,7 @@ export class PoolComponent implements OnInit {
     this.poolStats$ = this.route.params.pipe(map((params) => params.poolId))
       .pipe(
         switchMap((poolId: any) => {
+          this.isLoading = true;
           this.poolId = poolId;
           return this.apiService.getPoolHashrate$(this.poolId)
             .pipe(