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

UI/UX: Fix Blockchain skeleton preloader. (#696)

Browse Source 
* Fix Blockchain skeleton preloader.

* Fix Mempool Blocks skeleton preloader.

* Add e2e test.

* Add shared command to cyrpress e2e test.
This commit is contained in:
Miguel Medeiros
2021-08-06 08:09:47 -03:00
committed by GitHub
parent 6d910a5e24
commit 7a8b2db3fb
7 changed files with 69 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,9 +16,10 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
blocks: Block[] = this.mountEmptyBlocks();
markHeight: number;
blocksSubscription: Subscription;
networkSubscriotion: Subscription;
networkSubscription: Subscription;
tabHiddenSubscription: Subscription;
markBlockSubscription: Subscription;
isLoadingWebsocketSubscription: Subscription;
blockStyles = [];
interval: any;
tabHidden = false;
@@ -45,7 +46,8 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
ngOnInit() {
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.networkSubscriotion = this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.isLoadingWebsocketSubscription = this.stateService.isLoadingWebSocket$.subscribe((loading) => this.loadingBlocks = loading);
this.networkSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.blocksSubscription = this.stateService.blocks$
@@ -54,8 +56,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
return;
}
this.loadingBlocks = true;
if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
this.blocks = [];
this.blocksFilled = false;
@@ -75,13 +75,15 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.moveArrowToPosition(true, false);
}
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
setTimeout(() => {
if (!this.loadingBlocks) {
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.cd.markForCheck();
}, 50);
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.cd.markForCheck();
}, 50);
}
if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
this.blocksFilled = true;
@@ -124,9 +126,10 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.blocksSubscription.unsubscribe();
this.networkSubscriotion.unsubscribe();
this.networkSubscription.unsubscribe();
this.tabHiddenSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
this.isLoadingWebsocketSubscription.unsubscribe();
clearInterval(this.interval);
}