Merge branch 'master' into nymkappa/bugfix/ipv6-cln

frontend/src/app/lightning/channel/channel.component.html

@@ -1,4 +1,4 @@
-<div class="container-xl" *ngIf="(channel$ | async) as channel">
+<div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
   <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
   <div class="title-container">
     <h1 class="mb-0">{{ channel.short_id }}</h1>
@@ -87,3 +87,61 @@
     <i>{{ error.status }}: {{ error.error }}</i>
   </div>
 </ng-template>
+
+<ng-template #skeletonLoader>
+  <div class="container-xl">
+    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <div class="title-container">
+      <h1 class="mb-0"><span class="skeleton-loader" style="width: 275px; height: 25px;"></span></h1>
+      <span class="tx-link">
+        <span class="skeleton-loader" style="margin-bottom: 5px; width: 210px;"></span>
+      </span>
+    </div>
+    <div class="badges mb-2">
+      <span class="skeleton-loader" style="width: 50px; height: 22px; margin-top: 5px;"></span>
+    </div>
+  
+    <div class="clearfix"></div>
+
+    <div style="height: 413px;  padding: 15px;">
+      <div class="text-center loading-spinner">
+        <div class="spinner-border text-light"></div>
+      </div>
+    </div>
+
+    <br>
+
+    <div class="box">
+
+      <div class="row">
+        <div class="col-md">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="w-100 d-block d-md-none"></div>
+        <div class="col-md">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</ng-template>

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/channel/channel.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { forkJoin, Observable, of, share, zip } from 'rxjs';
+import { Observable, of, zip } from 'rxjs';
-import { catchError, map, shareReplay, switchMap, tap } from 'rxjs/operators';
+import { catchError, map, shareReplay, switchMap } from 'rxjs/operators';
 import { IChannel } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
 import { ElectrsApiService } from 'src/app/services/electrs-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { LightningApiService } from '../lightning-api.service';

frontend/src/app/lightning/channels-statistics/channels-statistics.component.html

@@ -104,21 +104,21 @@
 <ng-template #loadingReward>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
+      <h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
+      <h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
+      <h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>

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

@@ -1,10 +1,11 @@
-<div class="container-xl" *ngIf="(node$ | async) as node">
+<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
   <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
   <div class="title-container mb-2" *ngIf="!error">
     <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>
@@ -153,4 +154,101 @@
     
 </div>
 
+<ng-template #skeletonLoader>
+  <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: 36px;"></span></h1>
+      <span class="tx-link">
+        <span class="skeleton-loader" style="margin-bottom: 5px; width: 80%;"></span>
+      </span>
+    </div>
+
+    <div class="clearfix"></div>
+
+    <div class="box">
+
+      <div class="row">
+        <div class="col-md">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="w-100 d-block d-md-none"></div>
+        <div class="col-md">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+  
+    </div>
+
+    <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 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>
+      <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
+        <app-clipboard [text]="''"></app-clipboard>
+      </button>
+    </div>
+
+    <br>
+
+    <div class="row">
+      <div class="col-sm">
+        <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;">
+          <div class="text-center loadingGraphs">
+            <div class="spinner-border text-light"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</ng-template>
+
 <br>

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