Rearange network dropdown.

API for Bisq block height tip.
Loading indicators on transactions/blocks view.
Total sent now correctly display burnt on Pay trade fee txs.

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -6,13 +6,13 @@
 
   <table class="table table-borderless table-striped">
     <thead>
-      <th>Hash</th>
-      <th>Total Sent (BSQ)</th>
-      <th>Transactions</th>
-      <th>Height</th>
-      <th>Time</th>
+      <th style="width: 20%;">Hash</th>
+      <th style="width: 20%;">Total Sent (BSQ)</th>
+      <th style="width: 20%;">Transactions</th>
+      <th style="width: 20%;">Height</th>
+      <th style="width: 20%;">Time</th>
     </thead>
-    <tbody>
+    <tbody *ngIf="!isLoading; else loadingTmpl">
       <tr *ngFor="let block of blocks; trackBy: trackByFn">
         <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}" [state]="{ data: { block: block } }">{{ block.hash | shortenString : 13 }}</a></td>
         <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
@@ -27,4 +27,10 @@
 
   <ngb-pagination [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
 
-</div>
+</div>
+
+<ng-template #loadingTmpl>
+  <tr *ngFor="let i of loadingItems">
+    <td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
+  </tr>
+</ng-template>

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { BisqApiService } from '../bisq-api.service';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, tap } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
 import { SeoService } from 'src/app/services/seo.service';
@@ -17,6 +17,8 @@ export class BisqBlocksComponent implements OnInit {
   itemsPerPage: number;
   contentSpace = window.innerHeight - (165 + 75);
   fiveItemsPxSize = 250;
+  loadingItems: number[];
+  isLoading = true;
 
   pageSubject$ = new Subject<number>();
 
@@ -28,12 +30,15 @@ export class BisqBlocksComponent implements OnInit {
   ngOnInit(): void {
     this.seoService.setTitle('Blocks', true);
     this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
+    this.loadingItems = Array(this.itemsPerPage);
 
     this.pageSubject$
       .pipe(
+        tap(() => this.isLoading = true),
         switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * 10, this.itemsPerPage))
       )
       .subscribe((response) => {
+        this.isLoading = false;
         this.blocks = response.body;
         this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
       }, (error) => {