From 186b57e13d892797a35204629d6aeb4309494286 Mon Sep 17 00:00:00 2001
From: Maciej Hirsz <hello@maciej.codes>
Date: Wed, 4 Nov 2020 13:14:04 +0100
Subject: [PATCH] Comments and grumbles

---
 frontend/src/Connection.ts            | 16 +++++++++++-----
 frontend/src/components/List/List.css |  2 ++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Connection.ts b/frontend/src/Connection.ts
index ffa1d40..8a790b2 100644
--- a/frontend/src/Connection.ts
+++ b/frontend/src/Connection.ts
@@ -92,12 +92,18 @@ 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';
-  private updateThrottle = false;
+  // flag used to throttle DOM updates to window frame rate
+  private isUpdating = false;
   private socket: WebSocket;
   private state: Readonly<State>;
   private readonly update: Update;
@@ -151,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);
@@ -410,11 +416,11 @@ export class Connection {
       }
     }
 
-    if (nodes.hasChangedSince(ref) && !this.updateThrottle) {
-      this.updateThrottle = true;
+    if (nodes.hasChangedSince(nodesStateRef) && !this.isUpdating) {
+      this.isUpdating = true;
       window.requestAnimationFrame(() => {
         this.update({ nodes });
-        this.updateThrottle = false;
+        this.isUpdating = false;
       });
     }
 
diff --git a/frontend/src/components/List/List.css b/frontend/src/components/List/List.css
index 709d103..915a279 100644
--- a/frontend/src/components/List/List.css
+++ b/frontend/src/components/List/List.css
@@ -1,4 +1,6 @@
 .List {
+  /* Prevents the list from auto-scrolling while cascading node
+   * updates on new block, which helps with performance. */
   overflow-anchor: none;
 }