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) => {