From 46fdb5b30d8fc9c127c1ab292940c358e58d4faf Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 12 Jan 2024 18:08:57 +0700
Subject: [PATCH] Adding dashboard skeleton loaders

---
 .../app/components/block/block.component.html | 27 +++++++++++++++--
 .../app/dashboard/dashboard.component.html    | 30 ++++++++++++++++---
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index b34b39c8c..0c92de7af 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -233,7 +233,9 @@
           <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
         </div>
         <ng-container *ngIf="network !== 'liquid'">
-          <ng-container *ngTemplateOutlet="isMobile && mode === 'actual' ? actualDetails : expectedDetails"></ng-container>
+          <ng-template [ngIf]="!isLoadingOverview" [ngIfElse]="loadingDetailsSkeletons">
+            <ng-container *ngTemplateOutlet="isMobile && mode === 'actual' ? actualDetails : expectedDetails"></ng-container>
+          </ng-template>
         </ng-container>
       </div>
       <div class="col-sm" *ngIf="!isMobile">
@@ -245,7 +247,9 @@
           <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
         </div>
         <ng-container *ngIf="network !== 'liquid'">
-          <ng-container *ngTemplateOutlet="actualDetails"></ng-container>
+          <ng-template [ngIf]="!isLoadingOverview" [ngIfElse]="loadingDetailsSkeletons">
+            <ng-container *ngTemplateOutlet="actualDetails"></ng-container>
+          </ng-template>
         </ng-container>
       </div>
     </div>
@@ -452,5 +456,24 @@
   </table>
 </ng-template>
 
+<ng-template #loadingDetailsSkeletons>
+  <table class="table table-borderless table-striped audit-details-table">
+    <tbody>
+      <tr>
+        <td class="w-50" i18n="block.total-fees|Total fees in a block">Total fees</td>
+        <td><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td i18n="block.weight">Weight</td>
+        <td><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td i18n="mempool-block.transactions">Transactions</td>
+        <td><span class="skeleton-loader"></span></td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
 <br>
 <br>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 4025a45d0..12ce14512 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -87,8 +87,8 @@
               <th class="table-cell-new-fee" i18n="dashboard.new-transaction-fee">New fee</th>
               <th class="table-cell-badges" i18n="transaction.status|Transaction Status">Status</th>
             </thead>
-            <tbody>
-              <tr *ngFor="let replacement of replacements$ | async;">
+            <tbody *ngIf="replacements$ | async as replacements; else replacementsSkeleton">
+              <tr *ngFor="let replacement of replacements">
                 <td class="table-cell-txid">
                   <a [routerLink]="['/tx' | relativeUrl, replacement.txid]">
                     <app-truncate [text]="replacement.txid" [lastChars]="5"></app-truncate>
@@ -158,8 +158,8 @@
               <th class="table-cell-fiat" *ngIf="(network$ | async) === ''">{{ currency }}</th>
               <th class="table-cell-fees" i18n="transaction.fee|Transaction fee">Fee</th>
             </thead>
-            <tbody>
-              <tr *ngFor="let transaction of transactions$ | async; let i = index;">
+            <tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
+              <tr *ngFor="let transaction of transactions; let i = index;">
                 <td class="table-cell-txid">
                   <a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
                     <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
@@ -199,6 +199,28 @@
   </table>
 </ng-template>
 
+<ng-template #replacementsSkeleton>
+  <tbody>
+    <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-old-fee"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-new-fee"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-badges"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+    </tr>
+  </tbody>
+</ng-template>
+
+<ng-template #recentTransactionsSkeleton>
+  <tbody>
+    <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
+      <td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fiat" *ngIf="(network$ | async) === ''"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+    </tr>
+  </tbody>
+</ng-template>
+
 <ng-template #loadingTransactions>
   <div class="skeleton-loader skeleton-loader-transactions"></div>
 </ng-template>