SSR: fix graph loading indicators

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

@@ -12,5 +12,8 @@
       (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
     </div>
   </ng-container>
+  <div class="text-center loading-spinner" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
 
 </div>

frontend/src/app/lightning/nodes-map/nodes-map.component.scss

@@ -63,3 +63,13 @@
 .chart.widget {
   padding: 0px;
 }
+
+.loading-spinner {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 15px);
+  z-index: 100;
+  @media (max-width: 767.98px) {
+    top: 550px;
+  }
+}

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

@@ -26,6 +26,7 @@ export class NodesMap implements OnInit, OnChanges {
   inputNodes$: BehaviorSubject<any>;
   nodes$: Observable<any>;
   observable$: Observable<any>;
+  isLoading: boolean = true;
 
   chartInstance = undefined;
   chartOptions: EChartsOption = {};
@@ -37,7 +38,7 @@ export class NodesMap implements OnInit, OnChanges {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
-    private stateService: StateService,
+    public stateService: StateService,
     private assetsService: AssetsService,
     private router: Router,
     private zone: NgZone,
@@ -226,6 +227,7 @@ export class NodesMap implements OnInit, OnChanges {
         },
       ]
     };
+    this.isLoading = false;
   }
 
   onChartInit(ec) {
@@ -235,6 +237,10 @@ export class NodesMap implements OnInit, OnChanges {
 
     this.chartInstance = ec;
 
+    this.chartInstance.on('finished', () => {
+      this.isLoading = false;
+    });
+
     this.chartInstance.on('click', (e) => {
       if (e.data) {
         this.zone.run(() => {