diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index 5eb2ed481..7619587d8 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -82,9 +82,7 @@ export class BlockchainComponent implements OnInit, OnDestroy { } this.mempoolOffset = Math.max(0, width - this.dividerOffset); this.cd.markForCheck(); - setTimeout(() => { - this.mempoolOffsetChange.emit(this.mempoolOffset); - }, 0); + this.mempoolOffsetChange.emit(this.mempoolOffset); } @HostListener('window:resize', ['$event']) diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 3ec240b78..e6d5a4bf6 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -31,6 +31,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { @Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`; @Input() allBlocks: boolean = false; + mempoolWidth: number = 0; @Output() widthChange: EventEmitter = new EventEmitter(); specialBlocks = specialBlocks; @@ -155,7 +156,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { }), tap(() => { this.cd.markForCheck(); - this.widthChange.emit(this.containerOffset + this.mempoolBlocks.length * this.blockOffset); + const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset; + if (this.mempoolWidth !== width) { + this.mempoolWidth = width; + this.widthChange.emit(this.mempoolWidth); + } }) ); diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts index 33770bb24..22e39b2de 100644 --- a/frontend/src/app/components/start/start.component.ts +++ b/frontend/src/app/components/start/start.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input } from '@angular/core'; +import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input, DoCheck } from '@angular/core'; import { Subscription } from 'rxjs'; import { MarkBlockState, StateService } from '../../services/state.service'; import { specialBlocks } from '../../app.constants'; @@ -9,7 +9,7 @@ import { BlockExtended } from '../../interfaces/node-api.interface'; templateUrl: './start.component.html', styleUrls: ['./start.component.scss'], }) -export class StartComponent implements OnInit, OnDestroy { +export class StartComponent implements OnInit, OnDestroy, DoCheck { @Input() showLoadingIndicator = false; interval = 60; @@ -43,6 +43,7 @@ export class StartComponent implements OnInit, OnDestroy { pageIndex: number = 0; pages: any[] = []; pendingMark: number | null = null; + pendingOffset: number | null = null; lastUpdate: number = 0; lastMouseX: number; velocity: number = 0; @@ -54,6 +55,14 @@ export class StartComponent implements OnInit, OnDestroy { this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform); } + ngDoCheck(): void { + if (this.pendingOffset != null) { + const offset = this.pendingOffset; + this.pendingOffset = null; + this.addConvertedScrollOffset(offset); + } + } + ngOnInit() { this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount); this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => { @@ -429,6 +438,7 @@ export class StartComponent implements OnInit, OnDestroy { addConvertedScrollOffset(offset: number): void { if (!this.blockchainContainer?.nativeElement) { + this.pendingOffset = offset; return; } if (this.timeLtr) {