UI/UX - Add skeleton for blocks preload. (#615)

* Add skeleton for blocks preload.

* Add e2e testing for skeleton blocks preloader.

* Fix reduce mempool blocks to fit the screen.

* Fix variable naming.

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

@@ -1,4 +1,4 @@
-<div class="blocks-container" *ngIf="blocks.length">
+<div class="blocks-container" *ngIf="(isLoading$ | async)  === false">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
     <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
       <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
@@ -24,3 +24,12 @@
   </div>
   <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
+
+<div class="blocks-container" *ngIf="(isLoading$ | async) === true">
+  <div class="flashing">
+    <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
+      <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
+    </div>
+  </div>
+</div>
+

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -108,3 +108,15 @@
   border-right: 35px solid transparent;
   border-bottom: 35px solid #FFF;
 }
+
+.flashing {
+  animation: opacityPulse 2s ease-out;
+  animation-iteration-count: infinite; 
+  opacity: 1;
+}
+
+@keyframes opacityPulse {
+  0% {opacity: 0.7;}
+  50% {opacity: 1.0;}
+  100% {opacity: 0.7;}
+}

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
+import { Subscription, Observable } from 'rxjs';
 import { Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
@@ -11,8 +11,10 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
+  @Input() isLoading$: Observable<boolean>;
+
   network = '';
-  blocks: Block[] = [];
+  blocks: Block[] = this.mountEmptyBlocks();
   markHeight: number;
   blocksSubscription: Subscription;
   networkSubscriotion: Subscription;
@@ -42,6 +44,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
     this.networkSubscriotion = this.stateService.networkChanged$.subscribe((network) => this.network = network);
     this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
 
@@ -178,5 +181,26 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
       )`,
     };
   }
-
+  mountEmptyBlocks() {
+    const emptyBlocks = [];
+    for (let i = 0; i < 9; i++) {
+      emptyBlocks.push({
+        id: '',
+        height: 0,
+        version: 0,
+        timestamp: 0,
+        bits: 0,
+        nonce: 0,
+        difficulty: 0,
+        merkle_root: '',
+        tx_count: 0,
+        size: 0,
+        weight: 0,
+        previousblockhash: '',
+        matchRate: 0,
+        stage: 0,
+      });
+    }
+    return emptyBlocks;
+  }
 }