8000 Fix block animations while syncing by mononaut · Pull Request #3651 · mempool/mempool · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Fix block animations while syncing #3651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix block animations while syncing #3651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8000
00d94f5
Improve blockchain animations while syncing backend
mononaut Apr 6, 2023
81669c3
Improve blockchain animations during IBD
mononaut Apr 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() offset: number = 0;
@Input() height: number = 0; // max height of blocks in chunk (dynamic blocks only)
@Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
@Input() dynamicBlockCount: number = 8; // number of blocks in the dynamic block chunk
@Input() loadingTip: boolean = false;
@Input() connected: boolean = true;

Expand All @@ -45,7 +46,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
feeRounding = '1.0-0';
arrowVisible = false;
arrowLeftPx = 30;
blocksFilled = false;
arrowTransition = '1s';
showMiningInfo = false;
timeLtrSubscription: Subscription;
Expand Down Expand Up @@ -96,14 +96,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
if (!this.static) {
this.blocksSubscription = this.stateService.blocks$
.subscribe(([block, txConfirmed]) => {
.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.blocksFilled = false;
}

this.blocks.unshift(block);
Expand All @@ -117,20 +116,18 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}

this.blockStyles = [];
if (this.blocksFilled && 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)));
}

if (this.blocks.length === this.dynamicBlocksAmount) {
this.blocksFilled = true;
}
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();
Expand Down Expand Up @@ -160,7 +157,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {

ngOnChanges(changes: SimpleChanges): void {
if (this.static) {
const animateSlide = 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);
}
}
Expand Down Expand Up @@ -227,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,
Expand Down Expand Up @@ -311,13 +308,15 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
return {
left: addLeft + (155 * index) + 'px',
background: "#2d3348",
transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
};
}

getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
};
}

Expand All @@ -326,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",
};
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/blockchain/blockchain.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<app-mempool-blocks [hidden]="pageIndex > 0"></app-mempool-blocks>
<app-blockchain-blocks [hidden]="pageIndex > 0"></app-blockchain-blocks>
<ng-container *ngFor="let page of pages; trackBy: trackByPageFn">
<app-blockchain-blocks [static]="true" [offset]="page.offset" [height]="page.height" [count]="blocksPerPage" [loadingTip]="loadingTip" [connected]="connected"></app-blockchain-blocks>
<app-blockchain-blocks [static]="true" [offset]="page.offset" [height]="page.height" [dynamicBlockCount]="dynamicBlockCount" [count]="blocksPerPage" [loadingTip]="loadingTip" [connected]="connected"></app-blockchain-blocks>
</ng-container>
</div>
<div id="divider" [hidden]="pageIndex > 0">
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/components/blockchain/blockchain.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export class BlockchainComponent implements OnInit, OnDestroy {
@Input() pages: any[] = [];
@Input() pageIndex: number;
@Input() blocksPerPage: number = 8;
@Input() dynamicBlockCount: number = 8;
@Input() minScrollWidth: number = 0;

network: string;
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
});
this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks);
this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;

this.mempoolBlocks$ = merge(
of(true),
Expand Down Expand Up @@ -141,6 +140,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
})
);

this.loadingBlocks$ = combineLatest([
this.stateService.isLoadingWebSocket$,
this.mempoolBlocks$
]).pipe(map(([loading, mempoolBlocks]) => {
return loading || !mempoolBlocks.length;
}));

this.difficultyAdjustments$ = this.stateService.difficultyAdjustment$
.pipe(
map((da) => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/start/start.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
(dragstart)="onDragStart($event)"
(scroll)="onScroll($event)"
>
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [dynamicBlockCount]="dynamicBlocksAmount" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
</div>
<div class="reset-scroll" [class.hidden]="pageIndex === 0" (click)="resetScroll()">
<fa-icon [icon]="['fas', 'circle-left']" [fixedWidth]="true"></fa-icon>
Expand Down
27 changes: 21 additions & 6 deletions frontend/src/app/components/start/start.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -29,7 +30,8 @@ export class StartComponent implements OnInit, OnDestroy {
isMobile: boolean = false;
isiOS: boolean = false;
blockWidth = 155;
dynamicBlocksAmount: number = 8;
blocks: BlockExtended[] = [];
dynamicBlocksAmount: number;
blockCount: number = 0;
blocksPerPage: number = 1;
pageWidth: number;
Expand All @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/services/state.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export class StateService {

networkChanged$ = new ReplaySubject<string>(1);
lightningChanged$ = new ReplaySubject<boolean>(1);
blocks$: ReplaySubject<[BlockExtended, boolean]>;
blocks$: ReplaySubject<[BlockExtended, boolean, boolean]>;
transactions$ = new ReplaySubject<TransactionStripped>(6);
conversions$ = new ReplaySubject<any>(1);
bsqPrice$ = new ReplaySubject<number>(1);
Expand Down Expand Up @@ -157,7 +157,7 @@ export class StateService {
}
});

this.blocks$ = new ReplaySubject<[BlockExtended, boolean]>(this.env.KEEP_BLOCKS_AMOUNT);
this.blocks$ = new ReplaySubject<[BlockExtended, boolean, boolean]>(this.env.KEEP_BLOCKS_AMOUNT);

if (this.env.BASE_MODULE === 'bisq') {
this.network = this.env.BASE_MODULE;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/services/websocket.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export class WebsocketService {
blocks.forEach((block: BlockExtended) => {
if (block.height > this.stateService.latestBlockHeight) {
maxHeight = Math.max(maxHeight, block.height);
this.stateService.blocks$.next([block, false]);
this.stateService.blocks$.next([block, false, true]);
}
});
this.stateService.updateChainTip(maxHeight);
Expand All @@ -241,7 +241,7 @@ export class WebsocketService {
if (response.block) {
if (response.block.height > this.stateService.latestBlockHeight) {
this.stateService.updateChainTip(response.block.height);
this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
this.stateService.blocks$.next([response.block, !!response.txConfirmed, false]);
}

if (response.txConfirmed) {
Expand Down
0