From 40ee9648592615a3614516dde80da365a0f5882c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 4 Mar 2024 09:55:48 -0300
Subject: [PATCH] Add RefreshButton component to parameterComponent

---
 .../components/parameterComponent/index.tsx   | 28 ++++++--------
 .../src/components/ui/refreshButton.tsx       | 38 +++++++++++++++++++
 2 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 src/frontend/src/components/ui/refreshButton.tsx

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 385d441d3..942d62135 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -16,6 +16,7 @@ import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
 import { Button } from "../../../../components/ui/button";
+import { RefreshButton } from "../../../../components/ui/refreshButton";
 import {
   INPUT_HANDLER_HOVER,
   LANGFLOW_SUPPORTED_TYPES,
@@ -68,6 +69,7 @@ export default function ParameterComponent({
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
+  const [isLoading, setIsLoading] = useState(false);
 
   const flow = currentFlow?.data?.nodes ?? null;
 
@@ -420,14 +422,11 @@ export default function ParameterComponent({
                   />
                 </div>
                 {data.node?.template[name].refresh && (
-                  <button
-                    className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
-                    onClick={() => {
-                      handleUpdateValues(name, data);
-                    }}
-                  >
-                    <IconComponent name="RefreshCcw" />
-                  </button>
+                  <RefreshButton
+                    name={name}
+                    data={data}
+                    handleUpdateValues={handleUpdateValues}
+                  />
                 )}
               </div>
             )}
@@ -466,14 +465,11 @@ export default function ParameterComponent({
               />
             </div>
             {data.node?.template[name].refresh && (
-              <button
-                className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
-                onClick={() => {
-                  handleUpdateValues(name, data);
-                }}
-              >
-                <IconComponent name="RefreshCcw" />
-              </button>
+              <RefreshButton
+                name={name}
+                data={data}
+                handleUpdateValues={handleUpdateValues}
+              />
             )}
           </div>
         ) : left === true && type === "code" ? (
diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx
new file mode 100644
index 000000000..7374686f2
--- /dev/null
+++ b/src/frontend/src/components/ui/refreshButton.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import { NodeDataType } from "../../types/flow";
+import { cn } from "../../utils/utils";
+function RefreshButton({
+  name,
+  data,
+  handleUpdateValues,
+}: {
+  name: string;
+  data: NodeDataType;
+  handleUpdateValues: (name: string, data: NodeDataType) => void;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = () => {
+    setIsLoading(true);
+    console.log("refreshing");
+    handleUpdateValues(name, data);
+    setInterval(() => {
+      setIsLoading(false);
+    }, 500);
+  };
+
+  return (
+    <button
+      className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
+      onClick={handleClick}
+    >
+      <IconComponent
+        name={isLoading ? "Loader2" : "RefreshCcw"}
+        className={cn("h-4 w-4", isLoading ? "animate-spin" : "animate-wiggle")}
+      />
+    </button>
+  );
+}
+
+export { RefreshButton };