Changed debounce to use promise-debounce, making the Save promise work correctly

src/frontend/package-lock.json

@@ -40,6 +40,7 @@
         "class-variance-authority": "^0.6.1",
         "clsx": "^1.2.1",
         "cmdk": "^1.0.0",
+        "debounce-promise": "^3.1.2",
         "dompurify": "^3.0.5",
         "dotenv": "^16.4.5",
         "esbuild": "^0.17.19",
@@ -5670,6 +5671,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/debounce-promise": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
+      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

src/frontend/package.json

@@ -35,6 +35,7 @@
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
+    "debounce-promise": "^3.1.2",
     "dompurify": "^3.0.5",
     "dotenv": "^16.4.5",
     "esbuild": "^0.17.19",

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -23,14 +23,16 @@ export default function FlowSettingsModal({
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
   const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
-
+  const [isSaving, setIsSaving] = useState(false);
   function handleClick(): void {
+    setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
     currentFlow!.endpoint_name = endpoint_name;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
+        setIsSaving(false);
       })
       .catch((err) => {
         useAlertStore.getState().setErrorData({
@@ -79,6 +81,7 @@ export default function FlowSettingsModal({
           label: "Save",
           disabled: nameLists.includes(name) && name !== currentFlow!.name,
           dataTestId: "save-flow-settings",
+          loading: isSaving,
         }}
       />
     </BaseModal>

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,4 +1,5 @@
-import { cloneDeep, debounce } from "lodash";
+import { cloneDeep } from "lodash";
+import * as debounce from "debounce-promise";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import { SAVE_DEBOUNCE_TIME } from "../constants/constants";