diff --git a/frontend/src/Connection.ts b/frontend/src/Connection.ts index de15c07..8a790b2 100644 --- a/frontend/src/Connection.ts +++ b/frontend/src/Connection.ts @@ -92,15 +92,23 @@ export class Connection { }); } + // id sent to the backend used to pair responses private pingId = 0; + // timeout handler for ping messages private pingTimeout: NodeJS.Timer; + // timestamp at which the last ping has been sent private pingSent: Maybe = null; + // chain label to resubsribe to on reconnect private resubscribeTo: Maybe = getHashData().chain; + // flag whether or not FE should subscribe to consensus updates on reconnect private resubscribeSendFinality: boolean = getHashData().tab === 'consensus'; + // flag used to throttle DOM updates to window frame rate + private isUpdating = false; private socket: WebSocket; private state: Readonly; private readonly update: Update; private readonly pins: PersistentSet; + constructor( socket: WebSocket, update: Update, @@ -149,7 +157,7 @@ export class Connection { public handleMessages = (messages: FeedMessage.Message[]) => { const { nodes, chains, sortBy, selectedColumns } = this.state; - const { ref } = nodes; + const nodesStateRef = nodes.ref; const updateState: UpdateBound = (state) => { this.state = this.update(state); @@ -408,8 +416,12 @@ export class Connection { } } - if (nodes.hasChangedSince(ref)) { - this.state = this.update({ nodes }); + if (nodes.hasChangedSince(nodesStateRef) && !this.isUpdating) { + this.isUpdating = true; + window.requestAnimationFrame(() => { + this.update({ nodes }); + this.isUpdating = false; + }); } this.autoSubscribe(); diff --git a/frontend/src/components/List/List.css b/frontend/src/components/List/List.css index efb525c..915a279 100644 --- a/frontend/src/components/List/List.css +++ b/frontend/src/components/List/List.css @@ -1,3 +1,9 @@ +.List { + /* Prevents the list from auto-scrolling while cascading node + * updates on new block, which helps with performance. */ + 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 = () => {