From d536d63d69a1b0534b669879d2ae20a24aecf7f0 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 6 Sep 2022 11:01:46 +0200
Subject: [PATCH] Add skeleton loader in node per isp/country lists

---
 .../nodes-per-country.component.html          | 30 ++++++++++++++++++-
 .../nodes-per-country.component.ts            |  8 ++++-
 .../nodes-per-isp.component.html              | 30 ++++++++++++++++++-
 .../nodes-per-isp/nodes-per-isp.component.ts  |  8 ++++-
 4 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
index 16f4265a2..b4658a708 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
@@ -6,6 +6,7 @@
 
   <div style="min-height: 295px">
     <table class="table table-borderless">
+      
       <thead>
         <th class="alias text-left" i18n="lightning.alias">Alias</th>
         <th class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
@@ -14,7 +15,8 @@
         <th class="channels text-right" i18n="lightning.channels">Channels</th>
         <th class="city text-right" i18n="lightning.city">City</th>
       </thead>
-      <tbody *ngIf="nodes$ | async as nodes">
+      
+      <tbody *ngIf="nodes$ | async as nodes; else skeleton">
         <tr *ngFor="let node of nodes; let i= index; trackBy: trackByPublicKey">
           <td class="alias text-left text-truncate">
             <a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
@@ -39,6 +41,32 @@
             <app-geolocation [data]="node.geolocation" [type]="'list-country'"></app-geolocation>
           </td>
       </tbody>
+
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="alias text-left text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="timestamp-first text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="timestamp-update text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="capacity text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="channels text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="city text-right text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+
     </table>
   </div>
 
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
index 644e6741a..e0bf5eb66 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
@@ -16,11 +16,17 @@ export class NodesPerCountry implements OnInit {
   nodes$: Observable<any>;
   country: {name: string, flag: string};
 
+  skeletonLines: number[] = [];
+
   constructor(
     private apiService: ApiService,
     private seoService: SeoService,
     private route: ActivatedRoute,
-  ) { }
+  ) {
+    for (let i = 0; i < 20; ++i) {
+      this.skeletonLines.push(i);
+    }
+  }
 
   ngOnInit(): void {
     this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
index a8931d843..d27126fd2 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
@@ -3,6 +3,7 @@
 
   <div style="min-height: 295px">
     <table class="table table-borderless">
+
       <thead>
         <th class="alias text-left" i18n="lightning.alias">Alias</th>
         <th class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
@@ -11,7 +12,8 @@
         <th class="channels text-right" i18n="lightning.channels">Channels</th>
         <th class="city text-right" i18n="lightning.city">City</th>
       </thead>
-      <tbody *ngIf="nodes$ | async as nodes">
+
+      <tbody *ngIf="nodes$ | async as nodes; else skeleton">
         <tr *ngFor="let node of nodes; let i= index; trackBy: trackByPublicKey">
           <td class="alias text-left text-truncate">
             <a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
@@ -36,6 +38,32 @@
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
       </tbody>
+    
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="alias text-left text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="timestamp-first text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="timestamp-update text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="capacity text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="channels text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="city text-right text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+  
     </table>
   </div>
 
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts
index cc57056fc..f7edf783a 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts
@@ -15,11 +15,17 @@ export class NodesPerISP implements OnInit {
   nodes$: Observable<any>;
   isp: {name: string, id: number};
 
+  skeletonLines: number[] = [];
+
   constructor(
     private apiService: ApiService,
     private seoService: SeoService,
     private route: ActivatedRoute,
-  ) { }
+  ) {
+    for (let i = 0; i < 20; ++i) {
+      this.skeletonLines.push(i);
+    }
+  }
 
   ngOnInit(): void {
     this.nodes$ = this.apiService.getNodeForISP$(this.route.snapshot.params.isp)