machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve blockchain animations during IBD

Browse Source
This commit is contained in:
Mononaut 2023-04-06 11:00:46 +09:00
parent 00d94f5614
commit 81669c39e9
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -116,16 +116,18 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
this.blockStyles = [];
if (!batch && block.height > this.chainTip) {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
this.cd.markForCheck();
}, 50);
} else {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
}
this.blocks.forEach((b, i) => {
if (i === 0 && !batch && block.height > this.chainTip) {
this.blockStyles.push(this.getStyleForBlock(b, i, -205));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
this.cd.markForCheck();
}, 50);
} else {
this.blockStyles.push(this.getStyleForBlock(b, i));
}
});
this.chainTip = Math.max(this.chainTip, block.height);
this.cd.markForCheck();
@ -155,7 +157,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
ngOnChanges(changes: SimpleChanges): void {
if (this.static) {
const animateSlide = !!changes.dynamicBlockCount || (changes.height && (changes.height.currentValue === changes.height.previousValue + 1));
const animateSlide = (changes.dynamicBlockCount && changes.dynamicBlockCount.previousValue != null) || (changes.height && (changes.height.currentValue === changes.height.previousValue + 1));
this.updateStaticBlocks(animateSlide);
}
}
@ -222,8 +224,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
block = this.cacheService.getCachedBlock(height) || null;
}
this.blocks.push(block || {
placeholder: height < 0,
loading: height >= 0,
placeholder: !isNaN(height) && height < 0,
loading: isNaN(height) || height >= 0,
id: '',
height,
version: 0,
@ -306,6 +308,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
return {
left: addLeft + (155 * index) + 'px',
background: "#2d3348",
transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
};
}
@ -313,6 +316,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
};
}
@ -321,6 +325,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
background: "#2d3348",
};
}

27
frontend/src/app/components/start/start.component.ts
View File

@ -2,6 +2,7 @@ import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild } fro
import { Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants';
import { BlockExtended } from '../../interfaces/node-api.interface';
@Component({
selector: 'app-start',
@ -29,7 +30,8 @@ export class StartComponent implements OnInit, OnDestroy {
isMobile: boolean = false;
isiOS: boolean = false;
blockWidth = 155;
dynamicBlocksAmount: number = 0;
blocks: BlockExtended[] = [];
dynamicBlocksAmount: number;
blockCount: number = 0;
blocksPerPage: number = 1;
pageWidth: number;
@ -49,15 +51,28 @@ export class StartComponent implements OnInit, OnDestroy {
}
ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
this.blockCounterSubscription = this.stateService.blocks$.subscribe(() => {
this.blockCount++;
this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
this.firstPageWidth = 40 + (this.blockWidth * (this.dynamicBlocksAmount || 0));
this.blockCounterSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed, batch]) => {
if (this.blocks.some((b) => b.height === block.height)) {
return;
}
if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
this.blocks = [];
}
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT));
this.dynamicBlocksAmount = this.blocks.length;
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
if (this.blocks.length <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
this.onResize();
}
});
this.onResize();
this.updatePages();
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {