More performance tweaks

frontend/src/Connection.ts

@@ -97,10 +97,12 @@ export class Connection {
   private pingSent: Maybe<Types.Timestamp> = null;
   private resubscribeTo: Maybe<Types.ChainLabel> = getHashData().chain;
   private resubscribeSendFinality: boolean = getHashData().tab === 'consensus';
+  private updateThrottle = false;
   private socket: WebSocket;
   private state: Readonly<State>;
   private readonly update: Update;
   private readonly pins: PersistentSet<Types.NodeName>;
+
   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();

frontend/src/components/List/List.css

@@ -1,3 +1,7 @@
+.List {
+  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 = () => {