fix: use request animate frame

src/App.tsx

@@ -15,6 +15,7 @@ import { dataclassDisplayConfig } from "./components/canvas/render";
 import { IS_MOCKED, MOCK_VIEWS } from "./mock";
 import { Representation } from "./sources";
 import { pushHistory } from "./structures/history";
+import React from "react";
 
 
 function ServerURIInput() {
@@ -121,6 +122,25 @@ export default function App() {
     s.views, s.setStructure, s.modifyStructure,
   ]);
 
+  const requestRef = React.useRef<number>(0);
+
+  const animate = (_: any) => {
+    for (let view_id of accumulatedDiffs.keys()) {
+      const diffs = accumulatedDiffs.get(view_id)!.slice();
+      accumulatedDiffs.get(view_id)!.length = 0;
+      if (!diffs.length) {
+        continue;
+      }
+      modifyStructure(view_id, data => {
+        for (let diff of diffs) {
+          pushHistory(data, diff);
+        }
+        return data;
+      });
+    }
+    requestRef.current = requestAnimationFrame(animate);
+  }
+
   useEffect(() => {
     api.onConnected(() => {
       setIsConnected(true);
@@ -148,21 +168,12 @@ export default function App() {
       }
     });
 
-    setInterval(() => {
-      for (let view_id of accumulatedDiffs.keys()) {
-        const diffs = accumulatedDiffs.get(view_id)!.slice();
-        accumulatedDiffs.get(view_id)!.length = 0;
-        if (!diffs.length) {
-          continue;
-        }
-        modifyStructure(view_id, data => {
-          for (let diff of diffs) {
-            pushHistory(data, diff);
-          }
-          return data;
-        });
-      }
-    }, 50);
+    requestRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(requestRef.current);
+
+    // setInterval(() => {
+
+    // }, 50);
   }, []);
 
   let comp = null;