From f2780e65cdae729e680675b3078b84a781490f43 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 22 Jun 2022 19:08:16 +0000 Subject: [PATCH 1/2] Disable mined block animations --- .../block-overview-graph.component.scss | 1 + .../block-overview-graph.component.ts | 15 ++++++++ .../block-overview-graph/block-scene.ts | 34 ++++++++++++++++--- .../app/components/block/block.component.ts | 32 +++++++---------- 4 files changed, 58 insertions(+), 24 deletions(-) diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss index 05b9b340a..58b53aebf 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss @@ -26,6 +26,7 @@ .loader-wrapper { position: absolute; + background: #181b2d7f; left: 0; right: 0; top: 0; diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index a458ebd5f..e2774ac03 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -68,6 +68,21 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy { this.start(); } + destroy(): void { + if (this.scene) { + this.scene.destroy(); + this.start(); + } + } + + // initialize the scene without any entry transition + setup(transactions: TransactionStripped[]): void { + if (this.scene) { + this.scene.setup(transactions); + this.start(); + } + } + enter(transactions: TransactionStripped[], direction: string): void { if (this.scene) { this.scene.enter(transactions, direction); diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index fc5bfff8e..af64c0f20 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -29,10 +29,6 @@ export default class BlockScene { this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray }); } - destroy(): void { - Object.values(this.txs).forEach(tx => tx.destroy()); - } - resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void { this.width = width; this.height = height; @@ -46,6 +42,36 @@ export default class BlockScene { } } + // Destroy the current layout and clean up graphics sprites without any exit animation + destroy(): void { + Object.values(this.txs).forEach(tx => tx.destroy()); + this.txs = {}; + this.layout = null; + } + + // set up the scene with an initial set of transactions, without any transition animation + setup(txs: TransactionStripped[]) { + // clean up any old transactions + Object.values(this.txs).forEach(tx => { + tx.destroy(); + delete this.txs[tx.txid]; + }); + this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight }); + txs.forEach(tx => { + const txView = new TxView(tx, this.vertexArray); + this.txs[tx.txid] = txView; + this.place(txView); + this.saveGridToScreenPosition(txView); + this.applyTxUpdate(txView, { + display: { + position: txView.screenPosition, + color: txView.getColor() + }, + duration: 0 + }); + }); + } + // Animate new block entering scene enter(txs: TransactionStripped[], direction) { this.replace(txs, direction); diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 39c4042fb..9d8f3e486 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/co import { Location } from '@angular/common'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ElectrsApiService } from '../../services/electrs-api.service'; -import { switchMap, tap, debounceTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators'; +import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators'; import { Transaction, Vout } from '../../interfaces/electrs.interface'; -import { Observable, of, Subscription } from 'rxjs'; +import { Observable, of, Subscription, asyncScheduler } from 'rxjs'; import { StateService } from '../../services/state.service'; import { SeoService } from 'src/app/services/seo.service'; import { WebsocketService } from 'src/app/services/websocket.service'; @@ -33,7 +33,6 @@ export class BlockComponent implements OnInit, OnDestroy { strippedTransactions: TransactionStripped[]; overviewTransitionDirection: string; isLoadingOverview = true; - isAwaitingOverview = true; error: any; blockSubsidy: number; fees: number; @@ -124,6 +123,7 @@ export class BlockComponent implements OnInit, OnDestroy { return of(history.state.data.block); } else { this.isLoadingBlock = true; + this.isLoadingOverview = true; let blockInCache: BlockExtended; if (isBlockHeight) { @@ -170,13 +170,9 @@ export class BlockComponent implements OnInit, OnDestroy { this.transactions = null; this.transactionsError = null; this.isLoadingOverview = true; - this.isAwaitingOverview = true; - this.overviewError = true; - if (this.blockGraph) { - this.blockGraph.exit(direction); - } + this.overviewError = null; }), - debounceTime(300), + throttleTime(300, asyncScheduler, { leading: true, trailing: true }), shareReplay(1) ); this.transactionSubscription = block$.pipe( @@ -194,11 +190,6 @@ export class BlockComponent implements OnInit, OnDestroy { } this.transactions = transactions; this.isLoadingTransactions = false; - - if (!this.isAwaitingOverview && this.blockGraph && this.strippedTransactions && this.overviewTransitionDirection) { - this.isLoadingOverview = false; - this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false); - } }, (error) => { this.error = error; @@ -226,18 +217,19 @@ export class BlockComponent implements OnInit, OnDestroy { ), ) .subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => { - this.isAwaitingOverview = false; this.strippedTransactions = transactions; - this.overviewTransitionDirection = direction; - if (!this.isLoadingTransactions && this.blockGraph) { - this.isLoadingOverview = false; - this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false); + this.isLoadingOverview = false; + if (this.blockGraph) { + this.blockGraph.destroy(); + this.blockGraph.setup(this.strippedTransactions); } }, (error) => { this.error = error; this.isLoadingOverview = false; - this.isAwaitingOverview = false; + if (this.blockGraph) { + this.blockGraph.destroy(); + } }); this.networkChangedSubscription = this.stateService.networkChanged$ From da28e7b80e6a2bf6d81a0f112046f4ef4905ddde Mon Sep 17 00:00:00 2001 From: nymkappa Date: Wed, 22 Jun 2022 23:17:49 +0200 Subject: [PATCH 2/2] Preload the previous block - Disable 300 ms on block page --- .../app/components/block/block.component.ts | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 39c4042fb..3ff65c9df 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -54,6 +54,9 @@ export class BlockComponent implements OnInit, OnDestroy { blocksSubscription: Subscription; networkChangedSubscription: Subscription; queryParamsSubscription: Subscription; + nextBlockSubscription: Subscription = undefined; + nextBlockSummarySubscription: Subscription = undefined; + nextBlockTxListSubscription: Subscription = undefined; @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent; @@ -152,6 +155,14 @@ export class BlockComponent implements OnInit, OnDestroy { } }), tap((block: BlockExtended) => { + // Preload previous block summary (execute the http query so the response will be cached) + this.unsubscribeNextBlockSubscriptions(); + setTimeout(() => { + this.nextBlockSubscription = this.apiService.getBlock$(block.previousblockhash).subscribe(); + this.nextBlockTxListSubscription = this.electrsApiService.getBlockTransactions$(block.previousblockhash).subscribe(); + this.nextBlockSummarySubscription = this.apiService.getStrippedBlockTransactions$(block.previousblockhash).subscribe(); + }, 100); + this.block = block; this.blockHeight = block.height; const direction = (this.lastBlockHeight < this.blockHeight) ? 'right' : 'left'; @@ -176,7 +187,6 @@ export class BlockComponent implements OnInit, OnDestroy { this.blockGraph.exit(direction); } }), - debounceTime(300), shareReplay(1) ); this.transactionSubscription = block$.pipe( @@ -273,6 +283,19 @@ export class BlockComponent implements OnInit, OnDestroy { this.blocksSubscription.unsubscribe(); this.networkChangedSubscription.unsubscribe(); this.queryParamsSubscription.unsubscribe(); + this.unsubscribeNextBlockSubscriptions(); + } + + unsubscribeNextBlockSubscriptions() { + if (this.nextBlockSubscription !== undefined) { + this.nextBlockSubscription.unsubscribe(); + } + if (this.nextBlockSummarySubscription !== undefined) { + this.nextBlockSummarySubscription.unsubscribe(); + } + if (this.nextBlockTxListSubscription !== undefined) { + this.nextBlockTxListSubscription.unsubscribe(); + } } // TODO - Refactor this.fees/this.reward for liquid because it is not