Skeleton loader updates

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>
 

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;
+  }
+}

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>
 

frontend/src/app/lightning/node/node.component.scss

@@ -70,3 +70,10 @@ app-fiat {
     height: 1.5rem;
   }
 }
+
+.loadingGraphs {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 15px);
+  z-index: 100;
+}

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