From cfec6f26837968f646be4a2af6d6c86c6b9b402e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 4 Dec 2023 16:40:33 -0300
Subject: [PATCH] Cancel previous timeout if flow and reactFlowInstance changes

---
 .../components/PageComponent/index.tsx        | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index d272dd678..72a5e6167 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -166,15 +166,28 @@ export default function Page({
 
   const [loading, setLoading] = useState(true);
 
-  //update flow when tabs change
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
   useEffect(() => {
     setLoading(true);
     setNodes(flow?.data?.nodes ?? []);
     setEdges(flow?.data?.edges ?? []);
     setViewport(flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 });
-    setTimeout(() => {
+
+    // Clear the previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Create a new timeout
+    timeoutRef.current = setTimeout(() => {
       setLoading(false);
-    }, 300); // Timeout to prevent ReactFlow to appear before viewport is set. Can't make it async because setViewport is not an async function.
+    }, 300);
+
+    // Clear the timeout when the component is unmounted
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
   }, [flow, reactFlowInstance]);
 
   useEffect(() => {