Refactord blockchain is rendering, block arrow location propagation and keynavigation.

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

@@ -1,9 +1,5 @@
 <div class="container-xl">
 
-  <div style="position: relative;">
-    <app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
-  </div>
-
   <div class="title-block">
     <h1>Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/', blockHash]">{{ blockHeight }}</a></ng-template></h1>
   </div>

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

@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, tap, debounceTime } from 'rxjs/operators';
 import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
-import { of } from 'rxjs';
+import { of, Observable } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from 'src/app/services/websocket.service';
 
@@ -12,7 +12,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
   templateUrl: './block.component.html',
   styleUrls: ['./block.component.scss']
 })
-export class BlockComponent implements OnInit {
+export class BlockComponent implements OnInit, OnDestroy {
   block: Block;
   blockHeight: number;
   blockHash: string;
@@ -34,7 +34,8 @@ export class BlockComponent implements OnInit {
   ngOnInit() {
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
 
-    this.route.paramMap.pipe(
+    this.route.paramMap
+    .pipe(
       switchMap((params: ParamMap) => {
         const blockHash: string = params.get('id') || '';
         this.error = undefined;
@@ -54,17 +55,28 @@ export class BlockComponent implements OnInit {
           this.isLoadingBlock = true;
           return this.electrsApiService.getBlock$(blockHash);
         }
-      })
+      }),
+      tap((block: Block) => {
+        this.block = block;
+        this.blockHeight = block.height;
+        this.isLoadingBlock = false;
+        this.setBlockSubsidy();
+        if (block.reward) {
+          this.fees = block.reward / 100000000 - this.blockSubsidy;
+        }
+        this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
+        this.isLoadingTransactions = true;
+        this.transactions = null;
+      }),
+      debounceTime(250),
+      switchMap((block) => this.electrsApiService.getBlockTransactions$(block.id))
     )
-    .subscribe((block: Block) => {
-      this.block = block;
-      this.blockHeight = block.height;
-      this.isLoadingBlock = false;
-      this.setBlockSubsidy();
-      if (block.reward) {
-        this.fees = block.reward / 100000000 - this.blockSubsidy;
+    .subscribe((transactions: Transaction[]) => {
+      if (this.fees === undefined) {
+        this.fees = transactions[0].vout.reduce((acc: number, curr: Vout) => acc + curr.value, 0) / 100000000 - this.blockSubsidy;
       }
-      this.getBlockTransactions(block.id);
+      this.transactions = transactions;
+      this.isLoadingTransactions = false;
     },
     (error) => {
       this.error = error;
@@ -75,6 +87,10 @@ export class BlockComponent implements OnInit {
       .subscribe((block) => this.latestBlock = block);
   }
 
+  ngOnDestroy() {
+    this.stateService.markBlock$.next({});
+  }
+
   setBlockSubsidy() {
     this.blockSubsidy = 50;
     let halvenings = Math.floor(this.block.height / 210000);
@@ -84,19 +100,6 @@ export class BlockComponent implements OnInit {
     }
   }
 
-  getBlockTransactions(hash: string) {
-    this.isLoadingTransactions = true;
-    this.transactions = null;
-    this.electrsApiService.getBlockTransactions$(hash)
-      .subscribe((transactions: any) => {
-        if (this.fees === undefined) {
-          this.fees = transactions[0].vout.reduce((acc: number, curr: Vout) => acc + curr.value, 0) / 100000000 - this.blockSubsidy;
-        }
-        this.transactions = transactions;
-        this.isLoadingTransactions = false;
-      });
-  }
-
   loadMore() {
     if (this.isLoadingTransactions || !this.transactions.length || this.transactions.length === this.block.tx_count) {
       return;