Add loading animation for channel list

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