From ad0b0e5d5bb6b12b132e6b3e65b094311efc7ec5 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 4 Mar 2024 11:29:11 -0300
Subject: [PATCH] Add isLoading state to ParameterComponent and
 DropdownComponent

---
 .../components/parameterComponent/index.tsx   | 42 ++++++++++++++++++-
 .../components/dropdownComponent/index.tsx    | 17 +++++---
 .../src/components/ui/refreshButton.tsx       | 21 +---------
 3 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 79431ff72..57694cb75 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -69,7 +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;
 
   const groupedEdge = useRef(null);
@@ -87,6 +87,7 @@ export default function ParameterComponent({
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
 
   const handleUpdateValues = async (name: string, data: NodeDataType) => {
+    setIsLoading(true);
     const code = data.node?.template["code"]?.value;
     if (!code) {
       console.error("Code not found in the template");
@@ -96,13 +97,46 @@ export default function ParameterComponent({
     try {
       const res = await postCustomComponentUpdate(code, name);
       if (res.status === 200 && data.node?.template) {
-        data.node!.template[name] = res.data.template[name];
+        setNode(data.id, (oldNode) => {
+          let newNode = cloneDeep(oldNode);
+
+          newNode.data = {
+            ...newNode.data,
+          };
+
+          newNode.data.node.template[name] = res.data.template[name];
+
+          return newNode;
+        });
       }
     } catch (err) {
       setErrorData(err as { title: string; list?: Array<string> });
     }
+
+    renderTooltips();
+    try {
+      // Wait for at least 500 milliseconds
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      // Continue with the request
+      // If the request takes longer than 500 milliseconds, it will not wait an additional 500 milliseconds
+    } catch (error) {
+      console.error("Error occurred while waiting for refresh:", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
+  useEffect(() => {
+    function fetchData() {
+      if (data.node?.template[name]?.refresh) {
+        handleUpdateValues(name, data);
+      }
+    }
+    fetchData();
+    // I want this to run as soon as the component mounts
+    // but it is not updating the data
+    // the .refresh does not change
+  }, [data.node?.template[name]?.refresh]);
   const handleOnNewValue = (
     newValue: string | string[] | boolean | Object[]
   ): void => {
@@ -405,6 +439,7 @@ export default function ParameterComponent({
                 {data.node?.template[name].refresh && (
                   <div className="w-1/6">
                     <RefreshButton
+                      isLoading={isLoading}
                       disabled={disabled}
                       name={name}
                       data={data}
@@ -437,6 +472,7 @@ export default function ParameterComponent({
                 {data.node?.template[name].refresh && (
                   <div className="w-1/6">
                     <RefreshButton
+                      isLoading={isLoading}
                       disabled={disabled}
                       name={name}
                       data={data}
@@ -477,6 +513,7 @@ export default function ParameterComponent({
           <div className="mt-2 flex w-full items-center">
             <div className="w-5/6 flex-grow">
               <Dropdown
+                isLoading={isLoading}
                 options={data.node.template[name].options}
                 onSelect={handleOnNewValue}
                 value={data.node.template[name].value ?? "Choose an option"}
@@ -486,6 +523,7 @@ export default function ParameterComponent({
             {data.node?.template[name].refresh && (
               <div className="w-1/6">
                 <RefreshButton
+                  isLoading={isLoading}
                   disabled={disabled}
                   name={name}
                   data={data}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index db488aaac..6dfd31dba 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -5,6 +5,7 @@ import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 
 export default function Dropdown({
+  isLoading,
   value,
   options,
   onSelect,
@@ -129,11 +130,17 @@ export default function Dropdown({
         </>
       ) : (
         <>
-          <div>
-            <span className="text-sm italic">
-              No parameters are available for display.
-            </span>
-          </div>
+          {(!isLoading && (
+            <div>
+              <span className="text-sm italic">
+                No parameters are available for display.
+              </span>
+            </div>
+          )) || (
+            <div>
+              <span className="text-sm italic">Loading...</span>
+            </div>
+          )}
         </>
       )}
     </>
diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx
index f19a44524..3c446ff30 100644
--- a/src/frontend/src/components/ui/refreshButton.tsx
+++ b/src/frontend/src/components/ui/refreshButton.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { NodeDataType } from "../../types/flow";
 import { cn } from "../../utils/utils";
 
 function RefreshButton({
+  isLoading,
   disabled,
   name,
   data,
@@ -11,6 +11,7 @@ function RefreshButton({
   className,
   id,
 }: {
+  isLoading: boolean;
   disabled: boolean;
   name: string;
   data: NodeDataType;
@@ -18,27 +19,9 @@ function RefreshButton({
   handleUpdateValues: (name: string, data: NodeDataType) => void;
   id: string;
 }) {
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    handleUpdateValues(name, data);
-  }, []); // Empty dependency array to run only once
-
   const handleClick = async () => {
     if (disabled) return;
-    setIsLoading(true);
-    console.log("refreshing");
     handleUpdateValues(name, data);
-    try {
-      // Wait for at least 500 milliseconds
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      // Continue with the request
-      // If the request takes longer than 500 milliseconds, it will not wait an additional 500 milliseconds
-    } catch (error) {
-      console.error("Error occurred while waiting for refresh:", error);
-    } finally {
-      setIsLoading(false);
-    }
   };
 
   const classNames = cn(