From d8e87bccab1cc15d063c498702953c6ed31b0b4f Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Sun, 28 Aug 2022 11:11:53 +0200
Subject: [PATCH] Fix js crash in node page and add loading spinner to channel
 tree chart

---
 .../channels-list.component.html              |  2 --
 .../app/lightning/node/node.component.html    |  1 -
 .../node-channels.component.html              |  9 ++++++-
 .../node-channels.component.scss              |  9 +++++++
 .../nodes-channels/node-channels.component.ts | 27 ++++++++++++++-----
 5 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.html b/frontend/src/app/lightning/channels-list/channels-list.component.html
index 0dd2de183..b8920f4bc 100644
--- a/frontend/src/app/lightning/channels-list/channels-list.component.html
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.html
@@ -87,8 +87,6 @@
 </ng-template>
 
 <ng-template #skeleton>
-  <h2 class="float-left" i18n="lightning.channels">Channels</h2>
-
   <table class="table table-borderless">
   <ng-container *ngTemplateOutlet="tableHeader"></ng-container>
   <tbody>
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index 423b29afb..d1c257854 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -131,7 +131,6 @@
       <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
     </div>
 
-    <h2 i18n="lightning.active-channels-map">Active channels map</h2>
     <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
 
     <div class="d-flex justify-content-between">
diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.html b/frontend/src/app/lightning/nodes-channels/node-channels.component.html
index 43a5fad60..8fc63793c 100644
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.html
+++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.html
@@ -1,2 +1,9 @@
-<div *ngIf="channelsObservable$ | async" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
+<div *ngIf="channelsObservable$ | async" style="min-height: 455px">
+  <h2 i18n="lightning.active-channels-map">Active channels map</h2>
+  <div echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
+  </div>
+</div>
+
+<div *ngIf="isLoading" class="text-center loading-spinner">
+  <div class="spinner-border text-light"></div>
 </div>
diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.scss b/frontend/src/app/lightning/nodes-channels/node-channels.component.scss
index e69de29bb..4d7b4de0e 100644
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.scss
+++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.scss
@@ -0,0 +1,9 @@
+.loading-spinner {
+  min-height: 455px;
+  z-index: 100;
+}
+
+.spinner-border {
+  position: relative;
+  top: 225px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
index 9d6d7df2b..074315b35 100644
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
+++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
@@ -1,8 +1,8 @@
 import { formatNumber } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { ECharts, EChartsOption, TreemapSeriesOption } from 'echarts';
-import { Observable, tap } from 'rxjs';
+import { Observable, share, switchMap, tap } from 'rxjs';
 import { lerpColor } from 'src/app/shared/graphs.utils';
 import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
 import { LightningApiService } from '../lightning-api.service';
@@ -25,7 +25,7 @@ export class NodeChannels implements OnChanges {
   };
 
   channelsObservable$: Observable<any>;
-  isLoading: true;
+  isLoading = true;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -41,9 +41,20 @@ export class NodeChannels implements OnChanges {
 
     this.channelsObservable$ = this.lightningApiService.getChannelsByNodeId$(this.publicKey, -1, 'active')
       .pipe(
-        tap((response) => {
-          const biggestCapacity = response.body[0].capacity;
-          this.prepareChartOptions(response.body.map(channel => {
+        switchMap((response) => {
+          this.isLoading = true;
+          if ((response.body?.length ?? 0) <= 0) {
+            return [];
+          }
+          return [response.body];
+        }),
+        tap((body: any[]) => {
+          if (body.length === 0) {
+            this.isLoading = false;
+            return;
+          }
+          const biggestCapacity = body[0].capacity;
+          this.prepareChartOptions(body.map(channel => {
             return {
               name: channel.node.alias,
               value: channel.capacity,
@@ -54,7 +65,9 @@ export class NodeChannels implements OnChanges {
               }
             };
           }));
-        })
+          this.isLoading = false;
+        }),
+        share(),
       );
   }