Fix concurrent asynchronous calls. (#675)

* Fix concurrent asynchronous calls.

* Remove test without mempool info websocket.

* Remove isloading$ variable.

frontend/cypress/integration/mainnet/mainnet.spec.ts

@@ -1,4 +1,4 @@
-import { emitMempoolInfo } from "../../support/websocket";
+import { emitMempoolInfo, emitWithoutMempoolInfo } from "../../support/websocket";
 
 describe('Mainnet', () => {
     beforeEach(() => {
@@ -51,6 +51,7 @@ describe('Mainnet', () => {
               loaded: true
             }
         });
+
         cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
         cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
         cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');

frontend/cypress/support/websocket.ts

@@ -70,15 +70,15 @@ export const emitMempoolInfo = ({
 			default:
 				win.mockSocket.send('{"action":"init"}');
 				win.mockSocket.send('{"action":"want","data":["blocks","stats","mempool-blocks","live-2h-chart"]}');
-				cy.readFile('cypress/fixtures/mainnet_mempoolInfo.json', 'ascii').then((fixture) => {
-					win.mockSocket.send(JSON.stringify(fixture));
-				});
 				win.mockSocket.send('{"conversions":{"USD":32365.338815782445}}');
 				cy.readFile('cypress/fixtures/mainnet_live2hchart.json', 'ascii').then((fixture) => {
 					win.mockSocket.send(JSON.stringify(fixture));
 				});
+				cy.readFile('cypress/fixtures/mainnet_mempoolInfo.json', 'ascii').then((fixture) => {
+					win.mockSocket.send(JSON.stringify(fixture));
+				});
 		}
 	});
     cy.waitForSkeletonGone();
     return cy.get('#mempool-block-0');
-};
+};

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

@@ -1,4 +1,4 @@
-<div class="blocks-container" *ngIf="(isLoading$ | async)  === false">
+<div class="blocks-container" *ngIf="loadingBlocks">
   <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>
@@ -25,7 +25,7 @@
   <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="blocks-container" *ngIf="!loadingBlocks">
   <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>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
-import { Subscription, Observable } from 'rxjs';
+import { Subscription } 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,7 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
-  @Input() isLoading$: Observable<boolean>;
+  
-
   network = '';
   blocks: Block[] = this.mountEmptyBlocks();
   markHeight: number;
@@ -23,6 +22,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   blockStyles = [];
   interval: any;
   tabHidden = false;
+  loadingBlocks = false;
 
   arrowVisible = false;
   arrowLeftPx = 30;
@@ -54,6 +54,8 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
           return;
         }
 
+        this.loadingBlocks = true;
+
         if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
           this.blocks = [];
           this.blocksFilled = false;

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

@@ -1,8 +1,8 @@
 <div class="text-center" class="blockchain-wrapper">
   <div class="position-container">
     <span>
-      <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
+      <app-mempool-blocks></app-mempool-blocks>
-      <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
+      <app-blockchain-blocks></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>

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

@@ -1,21 +1,11 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { Subscription, Observable } from 'rxjs';
-
 @Component({
   selector: 'app-blockchain',
   templateUrl: './blockchain.component.html',
   styleUrls: ['./blockchain.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlockchainComponent implements OnInit {
+export class BlockchainComponent {
-  isLoading$: Observable<boolean>;
 
-  constructor(
+  constructor() { }
-    private stateService: StateService,
-  ) {}
-
-  ngOnInit() {
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
-  }
 }

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

@@ -1,4 +1,4 @@
-<div class="mempool-blocks-container" *ngIf="(isLoading$ | async)  === false">
+<div class="mempool-blocks-container">
   <div class="flashing" *ngIf="(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]">
@@ -38,7 +38,7 @@
   <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
 </div>
 
-<div class="mempool-blocks-container" *ngIf="(isLoading$ | async)  === true">
+<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>

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

@@ -13,7 +13,6 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolBlocksComponent implements OnInit, OnDestroy {
-  @Input() isLoading$: Observable<boolean>;
 
   mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks();
   mempoolBlocks$: Observable<MempoolBlock[]>;
@@ -31,6 +30,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   blockPadding = 30;
   arrowVisible = false;
   tabHidden = false;
+  loadingMempoolBlocks = true;
 
   rightPosition = 0;
   transition = '2s';
@@ -106,6 +106,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
             timeAvgMins += Math.abs(timeAvgDiff);
           }
 
+          this.loadingMempoolBlocks = false;
           return timeAvgMins * 60 * 1000;
         })
       );

frontend/src/app/components/television/television.component.html

@@ -12,8 +12,8 @@
 
     <div class="blockchain-wrapper">
       <div class="position-container">
-        <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
+        <app-mempool-blocks></app-mempool-blocks>
-        <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
+        <app-blockchain-blocks></app-blockchain-blocks>
         <div id="divider"></div>
       </div>
     </div>

frontend/src/app/components/television/television.component.ts

@@ -12,7 +12,6 @@ import { Observable } from 'rxjs';
   styleUrls: ['./television.component.scss']
 })
 export class TelevisionComponent implements OnInit {
-  isLoading$: Observable<boolean>;
 
   mempoolStats: OptimizedMempoolStats[] = [];
   mempoolVsizeFeesData: any;
@@ -27,7 +26,6 @@ export class TelevisionComponent implements OnInit {
   ngOnInit() {
     this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
     this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
 
     this.apiService.list2HStatistics$()
       .subscribe((mempoolStats) => {