fix: Add debouncing to handleOnNewValue and disable retries for usePostTemplateValue mutation (#7263)

* ✨ (use-handle-new-value.ts): add debounce functionality to handleOnNewValue function to improve performance and prevent excessive API calls
🔧 (use-post-template-value.ts): update usePostTemplateValue function options to set retry to 0 and prevent automatic retries on API call failures

* 🐛 (use-handle-new-value.ts): fix condition to check if value length is greater than 10 before updating node state

* 🐛 (use-handle-new-value.ts): fix condition to update node state based on changes in value to ensure correct behavior and remove unnecessary length check on value array

* ✨ (use-handle-new-value.ts): introduce constant DEBOUNCE_TIME_1_SECOND for better readability and maintainability of debounce time

* 🔧 (use-handle-new-value.ts): update debounce time from 1 second to 2 seconds for better user experience and performance.

* ✨ (use-handle-new-value.ts): introduce DEBOUNCE_FIELD_LIST constant to handle debouncing for specific input types
♻️ (use-handle-new-value.ts): refactor DEBOUNCE_TIME_2_SECONDS constant to DEBOUNCE_TIME_1_SECOND for better consistency and readability

* 🐛 (use-handle-new-value.ts): fix debounce time constant value to 2 seconds for better performance and user experience

* 🐛 (use-handle-new-value.ts): fix debounce time constant value from 2 seconds to 1 second for better user experience

src/frontend/src/CustomNodes/hooks/use-handle-new-value.ts

@@ -1,3 +1,4 @@
+import { DEBOUNCE_FIELD_LIST } from "@/constants/constants";
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
 import { track } from "@/customization/utils/analytics";
 import useAlertStore from "@/stores/alertStore";
@@ -6,10 +7,12 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { APIClassType, InputFieldType } from "@/types/api";
 import { AllNodeType } from "@/types/flow";
 import { useUpdateNodeInternals } from "@xyflow/react";
-import { cloneDeep } from "lodash";
+import { cloneDeep, debounce } from "lodash";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { mutateTemplate } from "../helpers/mutate-template";
 
+const DEBOUNCE_TIME_1_SECOND = 1000;
+
 export type handleOnNewValueType = (
   changes: Partial<InputFieldType>,
   options?: {
@@ -72,7 +75,8 @@ const useHandleOnNewValue = ({
     [nodeId, setNode, updateNodeInternals],
   );
 
-  // Memoize the handleOnNewValue function
+  const debouncedMutateRef = useRef<any>(null);
+
   const handleOnNewValue: handleOnNewValueType = useCallback(
     async (changes, options?) => {
       const newNode = cloneDeep(node);
@@ -97,6 +101,10 @@ const useHandleOnNewValue = ({
         return;
       }
 
+      const shouldDebounce = DEBOUNCE_FIELD_LIST.includes(
+        parameter?._input_type,
+      );
+
       if (!options?.skipSnapshot) takeSnapshot();
 
       Object.entries(changes).forEach(([key, value]) => {
@@ -111,7 +119,27 @@ const useHandleOnNewValue = ({
       };
 
       if (shouldUpdate && changes.value !== undefined) {
-        await mutateTemplate(
+        if (!debouncedMutateRef.current) {
+          debouncedMutateRef.current = debounce(
+            async (
+              value,
+              node,
+              setNodeClassFn,
+              postTemplateFn,
+              setErrorDataFn,
+            ) => {
+              await mutateTemplate(
+                value,
+                node,
+                setNodeClassFn,
+                postTemplateFn,
+                setErrorDataFn,
+              );
+            },
+            shouldDebounce ? DEBOUNCE_TIME_1_SECOND : 0,
+          );
+        }
+        debouncedMutateRef.current(
           changes.value,
           newNode,
           setNodeClass,

src/frontend/src/constants/constants.ts

@@ -1037,3 +1037,14 @@ export const ALL_LANGUAGES = [
   { value: "ar-SA", name: "Arabic" },
   { value: "hi-IN", name: "Hindi" },
 ];
+
+export const DEBOUNCE_FIELD_LIST = [
+  "SecretStrInput",
+  "MessageTextInput",
+  "TextInput",
+  "MultilineInput",
+  "SecretStrInput",
+  "IntInput",
+  "FloatInput",
+  "SliderInput",
+];

src/frontend/src/controllers/API/queries/nodes/use-post-template-value.ts

@@ -54,7 +54,10 @@ export const usePostTemplateValue: useMutationFunctionType<
   > = mutate(
     ["usePostTemplateValue", { parameterId, nodeId }],
     postTemplateValueFn,
-    options,
+    {
+      ...options,
+      retry: 0,
+    },
   );
 
   return mutation;