Optimize performance of next/previous block. (#729)

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

@@ -4,7 +4,7 @@
     <h1>
       <ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis 
         <div class="next-previous-blocks">
-          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
+          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
             <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
           </a>
           <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
@@ -15,14 +15,14 @@
       </ng-template>
       <ng-template [ngIf]="blockHeight" i18n="block.block"> Block 
         <div class="next-previous-blocks">
-          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
+          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
             <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
           </a>
           <span *ngIf="!showNextBlocklink" placement="bottom" class="disable">
             <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
           </span>
           <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
-          <a *ngIf="showPreviousBlocklink" [routerLink]="['/block/' | relativeUrl, previousBlockHeight]" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
+          <a *ngIf="showPreviousBlocklink" [routerLink]="['/block/' | relativeUrl, block?.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
             <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
           </a>
           <span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">

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

@@ -18,11 +18,11 @@ export class BlockComponent implements OnInit, OnDestroy {
   network = '';
   block: Block;
   blockHeight: number;
-  previousBlockHeight: number;
   nextBlockHeight: number;
   blockHash: string;
   isLoadingBlock = true;
   latestBlock: Block;
+  latestBlocks: Block[] = [];
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
@@ -73,9 +73,6 @@ export class BlockComponent implements OnInit, OnDestroy {
 
         if (history.state.data && history.state.data.blockHeight) {
           this.blockHeight = history.state.data.blockHeight;
-          this.previousBlockHeight = history.state.data.blockHeight - 1;
-          this.nextBlockHeight = history.state.data.blockHeight + 1;
-          this.setNextAndPreviousBlockLink();
         }
 
         let isBlockHeight = false;
@@ -88,9 +85,6 @@ export class BlockComponent implements OnInit, OnDestroy {
 
         if (history.state.data && history.state.data.block) {
           this.blockHeight = history.state.data.block.height;
-          this.previousBlockHeight = history.state.data.block.height - 1;
-          this.nextBlockHeight = history.state.data.block.height + 1;
-          this.setNextAndPreviousBlockLink();
           return of(history.state.data.block);
         } else {
           this.isLoadingBlock = true;
@@ -120,7 +114,6 @@ export class BlockComponent implements OnInit, OnDestroy {
       tap((block: Block) => {
         this.block = block;
         this.blockHeight = block.height;
-        this.previousBlockHeight = block.height - 1;
         this.nextBlockHeight = block.height + 1;
         this.setNextAndPreviousBlockLink();
 
@@ -164,6 +157,8 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.stateService.blocks$
       .subscribe(([block]) => {
         this.latestBlock = block;
+        this.latestBlocks.unshift(block);
+        this.latestBlocks = this.latestBlocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
         this.setNextAndPreviousBlockLink();
       });
 
@@ -179,19 +174,11 @@ export class BlockComponent implements OnInit, OnDestroy {
     });
 
     this.stateService.keyNavigation$.subscribe((event) => {
-      if (this.showPreviousBlocklink) {
+      if (this.showPreviousBlocklink && event.key === 'ArrowRight' && this.nextBlockHeight - 2 >= 0) {
-        if (event.key === 'ArrowRight') {
+        this.navigateToPreviousBlock();
-          if (this.previousBlockHeight >= 0) {
-            this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', this.previousBlockHeight]);
-            this.blockHeight = this.previousBlockHeight;
-          }
-        }
       }
-      if (this.showNextBlocklink) {
+      if (this.showNextBlocklink && event.key === 'ArrowLeft') {
-        if (event.key === 'ArrowLeft') {
+        this.navigateToNextBlock();
-          this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', this.nextBlockHeight]);
-          this.blockHeight = this.nextBlockHeight;
-        }
       }
     });
   }
@@ -263,8 +250,19 @@ export class BlockComponent implements OnInit, OnDestroy {
   onResize(event: any) {
     this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
   }
+
+  navigateToPreviousBlock() {
+    const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight - 2);
+    this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
+  }
+
+  navigateToNextBlock() {
+    const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight);
+    this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
+  }
+
   setNextAndPreviousBlockLink(){
-    if (this.latestBlock && this.blockHeight){
+    if (this.latestBlock && this.blockHeight) {
       if (this.blockHeight === 0){
         this.showPreviousBlocklink = false;
       } else {
@@ -272,7 +270,7 @@ export class BlockComponent implements OnInit, OnDestroy {
       }
       if (this.latestBlock.height && this.latestBlock.height === this.blockHeight) {
         this.showNextBlocklink = false;
-      }else{
+      } else {
         this.showNextBlocklink = true;
       }
     }