From 1bfa6d2a3296d17f2d721c043267f9278f2d88d3 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 21 Mar 2024 10:19:03 -0300
Subject: [PATCH] Add debounce to autoSaveCurrentFlow function

---
 src/frontend/src/stores/flowsManagerStore.ts | 23 ++++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 2c9fca428..5d6a3c77f 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -1,8 +1,11 @@
 import { AxiosError } from "axios";
-import { cloneDeep } from "lodash";
+import { cloneDeep, debounce } from "lodash";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
-import { STARTER_FOLDER_NAME } from "../constants/constants";
+import {
+  SAVE_DEBOUNCE_TIME,
+  STARTER_FOLDER_NAME,
+} from "../constants/constants";
 import {
   deleteFlowFromDatabase,
   readFlowsFromDatabase,
@@ -92,22 +95,18 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         });
     });
   },
-  autoSaveCurrentFlow: (nodes: Node[], edges: Edge[], viewport: Viewport) => {
-    // Clear the previous timeout if it exists.
-    if (saveTimeoutId) {
-      clearTimeout(saveTimeoutId);
-    }
-    set({ saveLoading: true });
-    // Set up a new timeout.
-    saveTimeoutId = setTimeout(() => {
+  autoSaveCurrentFlow: debounce(
+    (nodes: Node[], edges: Edge[], viewport: Viewport) => {
+      set({ saveLoading: true });
       if (get().currentFlow) {
         get().saveFlow(
           { ...get().currentFlow!, data: { nodes, edges, viewport } },
           true
         );
       }
-    }, 500); // Delay of 500ms because chat message depends on it.
-  },
+    },
+    SAVE_DEBOUNCE_TIME
+  ),
   saveFlow: (flow: FlowType, silent?: boolean) => {
     set({ saveLoading: true });
     return new Promise<void>((resolve, reject) => {