Merge pull request #3548 from mempool/simon/updating-node-map-loading

Update channels map indexing indicator

frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts

@@ -101,8 +101,15 @@ export class NodeFeeChartComponent implements OnInit {
   }
 
   prepareChartOptions(outgoingData, incomingData): void {
+    let sum = outgoingData.reduce((accumulator, object) => {
+      return accumulator + object.count;
+    }, 0);
+    sum += incomingData.reduce((accumulator, object) => {
+      return accumulator + object.count;
+    }, 0);
+
     let title: object;
-    if (outgoingData.length === 0) {
+    if (sum === 0) {
       title = {
         textStyle: {
           color: 'grey',
@@ -115,7 +122,7 @@ export class NodeFeeChartComponent implements OnInit {
     }
 
     this.chartOptions = {
-      title: outgoingData.length === 0 ? title : undefined,
+      title: sum === 0 ? title : undefined,
       animation: false,
       grid: {
         top: 30,
@@ -151,7 +158,7 @@ export class NodeFeeChartComponent implements OnInit {
           `;
         }
       },
-      xAxis: outgoingData.length === 0 ? undefined : {
+      xAxis: sum === 0 ? undefined : {
         type: 'category',
         axisLine: { onZero: true },
         axisLabel: {
@@ -163,7 +170,7 @@ export class NodeFeeChartComponent implements OnInit {
         },
         data: outgoingData.map(bucket => bucket.label)
       },
-      legend: outgoingData.length === 0 ? undefined : {
+      legend: sum === 0 ? undefined : {
         padding: 10,
         data: [
           {
@@ -184,7 +191,7 @@ export class NodeFeeChartComponent implements OnInit {
           },
         ],
       },
-      yAxis: outgoingData.length === 0 ? undefined : [
+      yAxis: sum === 0 ? undefined : [
         {
           type: 'value',
           axisLabel: {
@@ -202,7 +209,7 @@ export class NodeFeeChartComponent implements OnInit {
           },
         },
       ],
-      series: outgoingData.length === 0 ? undefined : [
+      series: sum === 0 ? undefined : [
         {
           zlevel: 0,
           name: $localize`Outgoing Fees`,

frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts

@@ -75,13 +75,13 @@ export class NodeStatisticsChartComponent implements OnInit {
 
   prepareChartOptions(data) {
     let title: object;
-    if (data.channels.length === 0) {
+    if (data.channels.length < 2) {
       title = {
         textStyle: {
           color: 'grey',
           fontSize: 15
         },
-        text: `Loading`,
+        text: $localize`No data to display yet. Try again later.`,
         left: 'center',
         top: 'center'
       };
@@ -135,14 +135,14 @@ export class NodeStatisticsChartComponent implements OnInit {
           return tooltip;
         }
       },
-      xAxis: data.channels.length === 0 ? undefined : {
+      xAxis: data.channels.length < 2 ? undefined : {
         type: 'time',
         splitNumber: this.isMobile() ? 5 : 10,
         axisLabel: {
           hideOverlap: true,
         }
       },
-      legend: data.channels.length === 0 ? undefined : {
+      legend: data.channels.length < 2 ? undefined : {
         padding: 10,
         data: [
           {
@@ -167,7 +167,7 @@ export class NodeStatisticsChartComponent implements OnInit {
           'Capacity': true,
         }
       },
-      yAxis: data.channels.length === 0 ? undefined : [
+      yAxis: data.channels.length < 2 ? undefined : [
         {
           type: 'value',
           axisLabel: {
@@ -198,7 +198,7 @@ export class NodeStatisticsChartComponent implements OnInit {
           }
         }
       ],
-      series: data.channels.length === 0 ? [] : [
+      series: data.channels.length < 2 ? [] : [
         {
           zlevel: 1,
           name: $localize`:@@807cf11e6ac1cde912496f764c176bdfdd6b7e19:Channels`,

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html

@@ -18,8 +18,5 @@
     <div class="text-center loading-spinner" [class]="style" *ngIf="isLoading && !disableSpinner">
       <div class="spinner-border text-light"></div>
     </div>
-    <div *ngIf="showIndexingInProgress" class="indexing-message">
-      <span class="badge badge-pill badge-warning" i18n="lightning.indexing-in-progress">Indexing in progress</span>
-    </div>
   </ng-container>
 </div>

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -36,7 +36,6 @@ export class NodesChannelsMap implements OnInit {
   channelCurve = 0;
   nodeSize = 4;
   isLoading = false;
-  showIndexingInProgress = false;
 
   chartInstance = undefined;
   chartOptions: EChartsOption = {};
@@ -205,15 +204,21 @@ export class NodesChannelsMap implements OnInit {
 
   prepareChartOptions(nodes, channels) {
     let title: object;
-    if (channels.length === 0 && !this.placeholder) {
+    if (channels.length === 0) {
-      this.chartOptions = null;
+      if (!this.placeholder) {
-      this.showIndexingInProgress = true;
         this.isLoading = false;
-      return;
+        title = {
-    }
+          textStyle: {
-
+            color: 'white',
-    // empty map fallback
+            fontSize: 18
-    if (channels.length === 0 && this.placeholder) {
+          },
+          text: $localize`No data to display yet. Try again later.`,
+          left: 'center',
+          top: 'center'
+        };
+        this.zoom = 1.5;
+        this.center = [0, 20];
+      } else { // used for Node and Channel preview components
         title = {
           textStyle: {
             color: 'white',
@@ -226,6 +231,7 @@ export class NodesChannelsMap implements OnInit {
         this.zoom = 1.5;
         this.center = [0, 20];
       }
+    }
 
     this.chartOptions = {
       silent: this.style === 'widget',