From f69afd2d9abbd70d10e40fba25ea3322ad5a9397 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Thu, 29 Sep 2022 12:11:41 +0500
Subject: [PATCH] editor: defer update propagation by 100ms

by default our editor sends an update "signal" on every single transaction.
This is oftentimes unnecessary. We can
improve the responsiveness by deferring this so multiple transactions cause
1 rerender.
---
 packages/editor/src/hooks/use-editor.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/hooks/use-editor.ts b/packages/editor/src/hooks/use-editor.ts
index 89e9d3214..3235a7fe4 100644
--- a/packages/editor/src/hooks/use-editor.ts
+++ b/packages/editor/src/hooks/use-editor.ts
@@ -34,6 +34,7 @@ export const useEditor = (
   const [editor, setEditor] = useState<Editor | null>(null);
   const forceUpdate = useForceUpdate();
   const editorRef = useRef<Editor | null>(editor);
+  const updateTimeout = useRef<number>();
 
   useEffect(
     () => {
@@ -44,13 +45,16 @@ export const useEditor = (
       setEditor(instance);
 
       instance.on("transaction", () => {
-        requestAnimationFrame(() => {
+        clearTimeout(updateTimeout.current);
+        updateTimeout.current = setTimeout(() => {
           requestAnimationFrame(() => {
-            if (isMounted) {
-              forceUpdate();
-            }
+            requestAnimationFrame(() => {
+              if (isMounted) {
+                forceUpdate();
+              }
+            });
           });
-        });
+        }, 100) as unknown as number;
       });
 
       return () => {