UI/UX: Fix blockchain-blocks skeleton. (#697)

* Fix blockchain-blocks skeleton.

* Fix blockchain skeleton background.

* Fix mempool blockchain skeleton.

* Add e2e testing.
Add tsconfig.
Fix mempool fit to screen.

* Fix wrong return.
Fix e2e testing.

* Fix blockchainblocks connectionstate.
Add init action to websocket mock.
Add e2e testing for droping websock connection.

* Ref e2e code for websocket connection.
Fix blockchain blocks skeleton.

* Fix state connections.
Remove .only e2e tests.

* Fix mempool blocks skeleton.

* Add fit screen to empty blocks.

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -1,47 +1,51 @@
-<div class="mempool-blocks-container">
-  <div class="flashing" *ngIf="!loadingMempoolBlocks && (timeAvg$ | async) as timeAvg;">      
-    <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
-      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
-        <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
-        <div class="block-body">
-          <div class="fees">
-            ~{{ projectedBlock.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-          </div>
-          <div class="fee-span">
-            {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-          </div>
-          <div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
-          <div class="transaction-count">
-            <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
-            <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-            <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
-          </div>
-          <div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
-            <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
-              <app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
-            </ng-template>
-            <ng-template #timeDiffMainnet>
-              <app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
-            </ng-template>
-          </div>
-          <ng-template #mergedBlock>
-            <div class="time-difference">
-              <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
-              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
+  <div class="mempool-blocks-container" *ngIf="(timeAvg$ | async) as timeAvg;">
+    <div class="flashing">      
+      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
+        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
+          <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
+          <div class="block-body">
+            <div class="fees">
+              ~{{ projectedBlock.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
             </div>
-          </ng-template>
+            <div class="fee-span">
+              {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
+            </div>
+            <div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
+            <div class="transaction-count">
+              <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
+              <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+              <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+            </div>
+            <div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
+              <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
+                <app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
+              </ng-template>
+              <ng-template #timeDiffMainnet>
+                <app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
+              </ng-template>
+            </div>
+            <ng-template #mergedBlock>
+              <div class="time-difference">
+                <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
+                <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+              </div>
+            </ng-template>
+          </div>
+          <span class="animated-border"></span>
         </div>
-        <span class="animated-border"></span>
-      </div>
-    </ng-template>
+      </ng-template>
+    </div>
+    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
   </div>
-  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
-</div>
+</ng-container>
 
-<div class="mempool-blocks-container" *ngIf="loadingMempoolBlocks === true">
-  <div class="flashing">
-    <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
-      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]"></div>
-    </ng-template>
+<ng-template #loadingBlocks>
+  <div class="mempool-blocks-container">
+    <div class="flashing">
+      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
+        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
+      </ng-template>
+    </div>
   </div>
-</div>
+</ng-template>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -3,7 +3,7 @@ import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer }
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
-import { take, map, switchMap } from 'rxjs/operators';
+import { take, map, switchMap, share } from 'rxjs/operators';
 import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
 
 @Component({
@@ -14,12 +14,15 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
 })
 export class MempoolBlocksComponent implements OnInit, OnDestroy {
 
-  mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks();
+  mempoolBlocks: MempoolBlock[] = [];
+  mempoolEmptyBlocks: MempoolBlock[] = this.mountEmptyBlocks();
   mempoolBlocks$: Observable<MempoolBlock[]>;
   timeAvg$: Observable<number>;
+  loadingBlocks$: Observable<boolean>;
 
-  mempoolBlocksFull: MempoolBlock[] = this.mountEmptyBlocks();
+  mempoolBlocksFull: MempoolBlock[] = [];
   mempoolBlockStyles = [];
+  mempoolEmptyBlockStyles = [];
   markBlocksSubscription: Subscription;
   isLoadingWebsocketSubscription: Subscription;
   blockSubscription: Subscription;
@@ -31,7 +34,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   blockPadding = 30;
   arrowVisible = false;
   tabHidden = false;
-  loadingMempoolBlocks = true;
 
   rightPosition = 0;
   transition = '2s';
@@ -50,17 +52,18 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.mempoolEmptyBlocks.forEach((b) => {
+      this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index));
+    });
+    this.reduceMempoolBlocksToFitScreen(this.mempoolEmptyBlocks);
+
     this.mempoolBlocks.map(() => {
       this.updateMempoolBlockStyles();
       this.calculateTransactionPosition();
     });
     this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks);
     this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
-    
-    this.isLoadingWebsocketSubscription = this.stateService.isLoadingWebSocket$.subscribe((loading) => {
-      this.loadingMempoolBlocks = loading;
-      this.cd.markForCheck();
-    });
+    this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
 
     this.mempoolBlocks$ = merge(
       of(true),
@@ -111,8 +114,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
           } else {
             timeAvgMins += Math.abs(timeAvgDiff);
           }
-
-          this.loadingMempoolBlocks = false;
+          
           return timeAvgMins * 60 * 1000;
         })
       );
@@ -170,7 +172,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     this.markBlocksSubscription.unsubscribe();
     this.blockSubscription.unsubscribe();
     this.networkSubscription.unsubscribe();
-    this.isLoadingWebsocketSubscription.unsubscribe();
     clearTimeout(this.resetTransitionTimeout);
   }
 
@@ -237,6 +238,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     };
   }
 
+  getStyleForMempoolEmptyBlock(index: number) {
+    return {
+      'right': 40 + index * 155 + 'px',
+      'background': '#554b45',
+    };
+  }
+
   calculateTransactionPosition() {
     if ((!this.txFeePerVSize && (this.markIndex === undefined || this.markIndex === -1)) || !this.mempoolBlocks) {
       this.arrowVisible = false;
@@ -289,7 +297,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
         blockSize: 0,
         blockVSize: 0,
         feeRange: [],
-        index: 0,
+        index: i,
         medianFee: 0,
         nTx: 0,
         totalFees: 0