Fix concurrent asynchronous calls. (#675)

* Fix concurrent asynchronous calls. * Remove test without mempool info websocket. * Remove isloading$ variable.
2021-07-31 13:40:15 -03:00 · 2021-07-31 13:40:15 -03:00 · 8b0d1db776
commit 8b0d1db776
parent 837e714b1f
10 changed files with 24 additions and 32 deletions
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/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');
--- a/frontend/cypress/support/websocket.ts
+++ b/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');
-};
+};
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/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>
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/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;
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/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-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
+      <app-mempool-blocks></app-mempool-blocks>
+      <app-blockchain-blocks></app-blockchain-blocks>
      <div id="divider"></div>
    </span>
  </div>
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@ -1,21 +1,11 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { Subscription, Observable } from 'rxjs';
-
+import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-blockchain',
  templateUrl: './blockchain.component.html',
  styleUrls: ['./blockchain.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlockchainComponent implements OnInit {
-  isLoading$: Observable<boolean>;
+export class BlockchainComponent {

-  constructor(
-    private stateService: StateService,
-  ) {}
-
-  ngOnInit() {
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
-  }
+  constructor() { }
 }
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/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>
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/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;
        })
      );
--- a/frontend/src/app/components/television/television.component.html
+++ b/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-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
+        <app-mempool-blocks></app-mempool-blocks>
+        <app-blockchain-blocks></app-blockchain-blocks>
        <div id="divider"></div>
      </div>
    </div>
--- a/frontend/src/app/components/television/television.component.ts
+++ b/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) => {