diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index 1f630e49d..dbe8971cf 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -10,8 +10,7 @@

Waiting for blocks...

-
-
+
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index fd6209e24..592355bea 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -1,21 +1,28 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { StateService } from 'src/app/services/state.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-blockchain', templateUrl: './blockchain.component.html', styleUrls: ['./blockchain.component.scss'] }) -export class BlockchainComponent implements OnInit { +export class BlockchainComponent implements OnInit, OnDestroy { txTrackingLoading = false; txShowTxNotFound = false; isLoading = true; + subscription: Subscription; constructor( private stateService: StateService, ) {} ngOnInit() { - this.stateService.blocks$.subscribe(() => this.isLoading = false); + this.subscription = this.stateService.isLoadingWebSocket$ + .subscribe((isLoading) => this.isLoading = isLoading); + } + + ngOnDestroy() { + this.subscription.unsubscribe(); } } diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 6c3e593cf..4f0cf0780 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -68,7 +68,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.stateService.blocks$ .subscribe(([block]) => { - if (block.matchRate >= 80 && !this.tabHidden) { + if (block.matchRate >= 66 && !this.tabHidden) { this.blockIndex++; } }); diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index f9a1ea541..c8836eaa2 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -29,6 +29,7 @@ export class StateService { txReplaced$ = new Subject(); mempoolTransactions$ = new Subject(); blockTransactions$ = new Subject(); + isLoadingWebSocket$ = new ReplaySubject(1); live2Chart$ = new Subject(); diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts index 2aad766ef..e2b45d681 100644 --- a/frontend/src/app/services/websocket.service.ts +++ b/frontend/src/app/services/websocket.service.ts @@ -52,16 +52,17 @@ export class WebsocketService { this.startSubscription(); }); - } startSubscription(retrying = false) { + this.stateService.isLoadingWebSocket$.next(true); if (retrying) { this.stateService.connectionState$.next(1); } this.websocketSubject.next({'action': 'init'}); this.subscription = this.websocketSubject .subscribe((response: WebsocketResponse) => { + this.stateService.isLoadingWebSocket$.next(false); if (response.blocks && response.blocks.length) { const blocks = response.blocks; blocks.forEach((block: Block) => {