Add loading animation for channel list

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

@@ -10,7 +10,7 @@
     </div>
   </form>
 
-  <table class="table table-borderless" *ngIf="response.channels.length > 0">
+  <table class="table table-borderless" *ngIf="response.channels.length > 0" [style]="isLoading ? 'opacity: 0.75' : ''">
     <ng-container *ngTemplateOutlet="tableHeader"></ng-container>
     <tbody>
       <tr *ngFor="let channel of response.channels; let i = index;">

frontend/src/app/lightning/channels-list/channels-list.component.ts

@@ -14,6 +14,7 @@ import { LightningApiService } from '../lightning-api.service';
 export class ChannelsListComponent implements OnInit, OnChanges {
   @Input() publicKey: string;
   @Output() channelsStatusChangedEvent = new EventEmitter<string>();
+  @Output() loadingEvent = new EventEmitter<boolean>(false);
   channels$: Observable<any>;
 
   // @ts-ignore
@@ -26,6 +27,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
   defaultStatus = 'open';
   status = 'open';
   publicKeySize = 25;
+  isLoading = false;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -56,6 +58,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
     )
     .pipe(
       tap((val) => {
+        this.isLoading = true;
+        this.loadingEvent.emit(true);
         if (typeof val === 'string') {
           this.status = val;
           this.page = 1;
@@ -64,10 +68,12 @@ export class ChannelsListComponent implements OnInit, OnChanges {
         }
       }),
       switchMap(() => {
-          this.channelsStatusChangedEvent.emit(this.status);
-          return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
+        this.channelsStatusChangedEvent.emit(this.status);
+        return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
       }),
       map((response) => {
+        this.isLoading = false;
+        this.loadingEvent.emit(false);
         return {
           channels: response.body,
           totalItems: parseInt(response.headers.get('x-total-count'), 10)

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

@@ -133,7 +133,7 @@
 
     <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
 
-    <div class="d-flex justify-content-between">
+    <div class="d-flex">
       <h2 *ngIf="channelsListStatus === 'open'">
         <span i18n="lightning.open-channels">Open channels</span>
         <span> ({{ node.opened_channel_count }})</span>
@@ -142,10 +142,13 @@
         <span i18n="lightning.open-channels">Closed channels</span>
         <span> ({{ node.closed_channel_count }})</span>
       </h2>
+      <div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
     </div>
 
     <app-channels-list [publicKey]="node.public_key"
-      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
+      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
+      (loadingEvent)="onLoadingEvent($event)"
+    ></app-channels-list>
   </div>
     
 </div>

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

@@ -56,4 +56,17 @@ app-fiat {
     display: inline-block;
     margin-left: 10px;
   }
+}
+
+.spinner-border {
+  @media (min-width: 768px) {
+    margin-top: 6.5px;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  @media (max-width: 768px) {
+    margin-top: 2.3px;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 }

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

@@ -22,7 +22,7 @@ export class NodeComponent implements OnInit {
   channelsListStatus: string;
   error: Error;
   publicKey: string;
-
+  channelListLoading = false;
   publicKeySize = 99;
 
   constructor(
@@ -97,4 +97,8 @@ export class NodeComponent implements OnInit {
   onChannelsListStatusChanged(e) {
     this.channelsListStatus = e;
   }
+
+  onLoadingEvent(e) {
+    this.channelListLoading = e;
+  }
 }