reduce outbound calls when widget re-positioned with keyboard

frontend/src/Editor/EditorFunc.jsx

@@ -64,6 +64,8 @@ import { useMounted } from '@/_hooks/use-mount';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
 
+import useDebouncedArrowKeyPress from '@/_hooks/useDebouncedArrowKeyPress';
+
 setAutoFreeze(false);
 enablePatches();
 
@@ -199,6 +201,7 @@ const EditorComponent = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const lastKeyPressTimestamp = useDebouncedArrowKeyPress(500); // 500 milliseconds delay
   // Handle appDefinition updates
   useEffect(() => {
     const didAppDefinitionChanged = !_.isEqual(appDefinition, prevAppDefinition.current);
@@ -219,6 +222,19 @@ const EditorComponent = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify({ appDefinition, currentPageId, dataQueries })]);
 
+  useEffect(() => {
+    // This effect runs when lastKeyPressTimestamp changes
+    // You can place your database update logic here
+    // Ensure that you only update the database if the timestamp is recent
+    if (Date.now() - lastKeyPressTimestamp < 500) {
+      updateEditorState({
+        isUpdatingEditorStateInProcess: true,
+      });
+      autoSave();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify({ appDefinition, lastKeyPressTimestamp })]);
+
   const handleMessage = (event) => {
     const { data } = event;
 
@@ -774,8 +790,15 @@ const EditorComponent = (props) => {
       updateState({
         appDiffOptions: opts,
       });
+
+      let updatingEditorStateInProcess = true;
+
+      if (opts?.widgetMovedWithKeyboard === true) {
+        updatingEditorStateInProcess = false;
+      }
+
       updateEditorState({
-        isUpdatingEditorStateInProcess: true,
+        isUpdatingEditorStateInProcess: updatingEditorStateInProcess,
         appDefinition: updatedAppDefinition,
       });
 

frontend/src/_hooks/useDebouncedArrowKeyPress.js

@@ -0,0 +1,37 @@
+// useDebouncedArrowKeyPress.js
+import { useEffect, useState } from 'react';
+
+function useDebouncedArrowKeyPress(delay) {
+  const [lastKeyPressTimestamp, setLastKeyPressTimestamp] = useState(0);
+
+  useEffect(() => {
+    let timer;
+
+    function handleKeyPress(event) {
+      if (
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight'
+      ) {
+        // Arrow key was pressed; debounce the update
+        clearTimeout(timer);
+
+        timer = setTimeout(() => {
+          // Trigger the update only after the specified delay
+          setLastKeyPressTimestamp(Date.now());
+        }, delay);
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [delay]);
+
+  return lastKeyPressTimestamp;
+}
+
+export default useDebouncedArrowKeyPress;