From dd9ff41fdedf323181658557353428dc29672e37 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 30 Aug 2022 10:42:50 +0200
Subject: [PATCH] Skeleton loader updates

---
 .../lightning/channel/channel.component.html  |  6 +++++-
 .../lightning/channel/channel.component.scss  | 12 ++++++++++++
 .../app/lightning/node/node.component.html    | 19 ++++++++++++++-----
 .../app/lightning/node/node.component.scss    |  9 ++++++++-
 .../src/app/lightning/node/node.component.ts  |  8 +-------
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html
index e791dbe12..195c35324 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -103,7 +103,11 @@
   
     <div class="clearfix"></div>
 
-    <div style="height: 413px;  padding: 15px;"><span class="skeleton-loader" style="height: 398px;"></span></div>
+    <div style="height: 413px;  padding: 15px;">
+      <div class="text-center loading-spinner">
+        <div class="spinner-border text-light"></div>
+      </div>
+    </div>
 
     <br>
 
diff --git a/frontend/src/app/lightning/channel/channel.component.scss b/frontend/src/app/lightning/channel/channel.component.scss
index bf080b644..c23d8e28c 100644
--- a/frontend/src/app/lightning/channel/channel.component.scss
+++ b/frontend/src/app/lightning/channel/channel.component.scss
@@ -56,3 +56,15 @@ app-fiat {
     font-size: 1.4rem;
   }
 }
+
+
+.loading-spinner {
+  position: absolute;
+  top: 400px;
+  z-index: 100;
+  width: 100%;
+  left: 0;
+  @media (max-width: 767.98px) {
+    top: 450px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index b08f3ccb2..526608363 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -4,7 +4,8 @@
     <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
     <span class="tx-link">
       <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
-        {{ node.public_key | shortenString : publicKeySize }}
+        <span class="d-inline d-lg-none">{{ node.public_key | shortenString : 24 }}</span>
+        <span class="d-none d-lg-inline">{{ node.public_key }}</span>
       </a>
       <app-clipboard [text]="node.public_key"></app-clipboard>
     </span>
@@ -157,7 +158,7 @@
   <div class="container-xl">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
-      <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 25px;"></span></h1>
+      <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px;"></span></h1>
       <span class="tx-link">
         <span class="skeleton-loader" style="margin-bottom: 5px; width: 80%;"></span>
       </span>
@@ -219,7 +220,7 @@
 
     <div class="input-group mt-3" >
     <span class="input-group-text" id="basic-addon3"><span class="skeleton-loader" style="width: 75px;"></span></span>
-      <input type="text" class="form-control" disabled>
+      <input type="text" class="form-control" disabled style="opacity: 0.3;">
       <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
         <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
       </button>
@@ -232,10 +233,18 @@
 
     <div class="row">
       <div class="col-sm">
-        <div style="height: 400px;"><span class="skeleton-loader" style="height: 400px;"></span></div>
+        <div style="height: 400px;">
+          <div class="text-center loadingGraphs">
+            <div class="spinner-border text-light"></div>
+          </div>
+        </div>
       </div>
       <div class="col-sm">
-        <div style="height: 400px;"><span class="skeleton-loader" style="height: 400px;"></span></div>
+        <div style="height: 400px;">
+          <div class="text-center loadingGraphs">
+            <div class="spinner-border text-light"></div>
+          </div>
+        </div>
       </div>
     </div>
 
diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss
index b2e6f573b..481f2a8c4 100644
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -69,4 +69,11 @@ app-fiat {
     width: 1.5rem;
     height: 1.5rem;
   }
-}
\ No newline at end of file
+}
+
+.loadingGraphs {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 15px);
+  z-index: 100;
+}
diff --git a/frontend/src/app/lightning/node/node.component.ts b/frontend/src/app/lightning/node/node.component.ts
index bfee9252d..aad8e14d0 100644
--- a/frontend/src/app/lightning/node/node.component.ts
+++ b/frontend/src/app/lightning/node/node.component.ts
@@ -4,7 +4,6 @@ import { Observable } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
-import { isMobile } from '../../shared/common.utils';
 import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 
 @Component({
@@ -23,17 +22,12 @@ export class NodeComponent implements OnInit {
   error: Error;
   publicKey: string;
   channelListLoading = false;
-  publicKeySize = 99;
 
   constructor(
     private lightningApiService: LightningApiService,
     private activatedRoute: ActivatedRoute,
     private seoService: SeoService,
-  ) {
-    if (isMobile()) {
-      this.publicKeySize = 12;
-    }
-  }
+  ) { }
 
   ngOnInit(): void {
     this.node$ = this.activatedRoute.paramMap