fixup! batch updates in client

cpvalente · Jan 25, 2025 · ea2565b · ea2565b
1 parent 65362a6
commit ea2565b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 25 deletions.
diff --git a/apps/client/src/common/stores/runtime.ts b/apps/client/src/common/stores/runtime.ts
@@ -15,24 +15,24 @@ export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
   useStoreWithEqualityFn(runtimeStore, selector, deepCompare);
 
 let batchStore: Partial<RuntimeStore> = {};
-let isUpdatePending: NodeJS.Timeout | null = null;
+
+export function addToBatchUpdates<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]) {
+  batchStore[key] = value;
+}
+
+export function flushBatchUpdates() {
+  const state = runtimeStore.getState();
+  runtimeStore.setState({ ...state, ...batchStore });
+  batchStore = {};
+}
 
 /**
  * Allows patching a property of the runtime store
  */
 export function patchRuntimeProperty<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]) {
-  // We batch updates here to avoid rapid updates triggering multiple rendes that lead to flikering UI
-  batchStore[key] = value;
-  if (!isUpdatePending) {
-    isUpdatePending = setTimeout(() => {
-      const state = runtimeStore.getState();
-      runtimeStore.setState({ ...state, ...batchStore });
-      batchStore = {};
-      isUpdatePending = null;
-    }, 5);
-    //TODO: might need some fine tuneing
-    //at 60fps 1 frame is ~16ms
-  }
+  const state = runtimeStore.getState();
+  state[key] = value;
+  runtimeStore.setState({ ...state });
 }
 
 /**

diff --git a/apps/client/src/common/utils/socket.ts b/apps/client/src/common/utils/socket.ts
@@ -14,7 +14,7 @@ import {
 } from '../stores/clientStore';
 import { addDialog } from '../stores/dialogStore';
 import { addLog } from '../stores/logger';
-import { patchRuntime, patchRuntimeProperty } from '../stores/runtime';
+import { addToBatchUpdates, flushBatchUpdates, patchRuntime, patchRuntimeProperty } from '../stores/runtime';
 
 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
@@ -140,57 +140,57 @@ export const connectSocket = () => {
           break;
         }
         case 'ontime-clock': {
-          patchRuntimeProperty('clock', payload);
+          addToBatchUpdates('clock', payload);
           updateDevTools({ clock: payload });
           break;
         }
         case 'ontime-timer': {
-          patchRuntimeProperty('timer', payload);
+          addToBatchUpdates('timer', payload);
           updateDevTools({ timer: payload });
           break;
         }
         case 'ontime-onAir': {
-          patchRuntimeProperty('onAir', payload);
+          addToBatchUpdates('onAir', payload);
           updateDevTools({ onAir: payload });
           break;
         }
         case 'ontime-message': {
-          patchRuntimeProperty('message', payload);
+          addToBatchUpdates('message', payload);
           updateDevTools({ message: payload });
           break;
         }
         case 'ontime-runtime': {
-          patchRuntimeProperty('runtime', payload);
+          addToBatchUpdates('runtime', payload);
           updateDevTools({ runtime: payload });
           break;
         }
         case 'ontime-eventNow': {
-          patchRuntimeProperty('eventNow', payload);
+          addToBatchUpdates('eventNow', payload);
           updateDevTools({ eventNow: payload });
           break;
         }
         case 'ontime-currentBlock': {
-          patchRuntimeProperty('currentBlock', payload);
+          addToBatchUpdates('currentBlock', payload);
           updateDevTools({ currentBlock: payload });
           break;
         }
         case 'ontime-publicEventNow': {
-          patchRuntimeProperty('publicEventNow', payload);
+          addToBatchUpdates('publicEventNow', payload);
           updateDevTools({ publicEventNow: payload });
           break;
         }
         case 'ontime-eventNext': {
-          patchRuntimeProperty('eventNext', payload);
+          addToBatchUpdates('eventNext', payload);
           updateDevTools({ eventNext: payload });
           break;
         }
         case 'ontime-publicEventNext': {
-          patchRuntimeProperty('publicEventNext', payload);
+          addToBatchUpdates('publicEventNext', payload);
           updateDevTools({ publicEventNext: payload });
           break;
         }
         case 'ontime-auxtimer1': {
-          patchRuntimeProperty('auxtimer1', payload);
+          addToBatchUpdates('auxtimer1', payload);
           updateDevTools({ auxtimer1: payload });
           break;
         }
@@ -207,6 +207,10 @@ export const connectSocket = () => {
           }
           break;
         }
+        case 'ontime-flush': {
+          flushBatchUpdates()
+          break;
+        }
       }
     } catch (_) {
       // ignore unhandled

diff --git a/apps/server/src/stores/EventStore.ts b/apps/server/src/stores/EventStore.ts
@@ -35,6 +35,7 @@ export const eventStore = {
         for (const dataKey of changedKeys) {
           socket.sendAsJson({ type: `ontime-${dataKey}`, payload: store[dataKey] });
         }
+        socket.sendAsJson({ type: `ontime-flush` });
         isUpdatePending = null;
         changedKeys.clear();
       });