diff --git a/frontend/src/Connection.ts b/frontend/src/Connection.ts index de15c07..ffa1d40 100644 --- a/frontend/src/Connection.ts +++ b/frontend/src/Connection.ts @@ -97,10 +97,12 @@ export class Connection { private pingSent: Maybe = null; private resubscribeTo: Maybe = getHashData().chain; private resubscribeSendFinality: boolean = getHashData().tab === 'consensus'; + private updateThrottle = false; private socket: WebSocket; private state: Readonly; private readonly update: Update; private readonly pins: PersistentSet; + constructor( socket: WebSocket, update: Update, @@ -408,8 +410,12 @@ export class Connection { } } - if (nodes.hasChangedSince(ref)) { - this.state = this.update({ nodes }); + if (nodes.hasChangedSince(ref) && !this.updateThrottle) { + this.updateThrottle = true; + window.requestAnimationFrame(() => { + this.update({ nodes }); + this.updateThrottle = false; + }); } this.autoSubscribe(); diff --git a/frontend/src/components/List/List.css b/frontend/src/components/List/List.css index efb525c..709d103 100644 --- a/frontend/src/components/List/List.css +++ b/frontend/src/components/List/List.css @@ -1,3 +1,7 @@ +.List { + overflow-anchor: none; +} + .List-no-nodes { font-size: 30px; padding-top: 20vh; diff --git a/frontend/src/components/List/List.tsx b/frontend/src/components/List/List.tsx index 12c7b36..50a0b27 100644 --- a/frontend/src/components/List/List.tsx +++ b/frontend/src/components/List/List.tsx @@ -37,7 +37,6 @@ export class List extends React.Component { }; private relativeTop = -1; - private scrolling = false; public componentDidMount() { this.onScroll(); @@ -108,10 +107,6 @@ export class List extends React.Component { } private onScroll = () => { - if (this.scrolling) { - return; - } - const relativeTop = divisibleBy( window.scrollY - (HEADER + TR_HEIGHT), TR_HEIGHT * ROW_MARGIN @@ -122,13 +117,7 @@ export class List extends React.Component { } this.relativeTop = relativeTop; - this.scrolling = true; - window.requestAnimationFrame(this.onScrollRAF); - }; - - private onScrollRAF = () => { - const { relativeTop } = this; const { viewportHeight } = this.state; const top = Math.max(relativeTop, 0); const height = @@ -139,8 +128,6 @@ export class List extends React.Component { if (listStart !== this.state.listStart || listEnd !== this.state.listEnd) { this.setState({ listStart, listEnd }); } - - this.scrolling = false; }; private onResize = () => {