Merge pull request #297 from paritytech/mh-firefox-tuning

More performance tweaks

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<Types.Timestamp> = null;
+  // chain label to resubsribe to on reconnect
   private resubscribeTo: Maybe<Types.ChainLabel> = 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<State>;
   private readonly update: Update;
   private readonly pins: PersistentSet<Types.NodeName>;
+
   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();

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;

frontend/src/components/List/List.tsx

@@ -37,7 +37,6 @@ export class List extends React.Component<List.Props, {}> {
   };
 
   private relativeTop = -1;
-  private scrolling = false;
 
   public componentDidMount() {
     this.onScroll();
@@ -108,10 +107,6 @@ export class List extends React.Component<List.Props, {}> {
   }
 
   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<List.Props, {}> {
     }
 
     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<List.Props, {}> {
     if (listStart !== this.state.listStart || listEnd !== this.state.listEnd) {
       this.setState({ listStart, listEnd });
     }
-
-    this.scrolling = false;
   };
 
   private onResize = () => {