feat(flowsContext.tsx): add nodesOnFlow and setNodesOnFlow functions to FlowsContext to track changes in nodes on the flow

fix(PageComponent/index.tsx): update onNodesChangeMod function to only trigger when there are changes in the nodes on the flow and update nodesOnFlow state in FlowsContext
feat(tabs/index.ts): add nodesOnFlow and setNodesOnFlow functions to FlowsContextType to track changes in nodes on the flow

src/frontend/src/contexts/flowsContext.tsx

@@ -92,6 +92,8 @@ const FlowsContextInitialValue: FlowsContextType = {
   saveComponent: async (component: NodeDataType, override: boolean) => "",
   deleteComponent: (key: string) => {},
   version: "",
+  nodesOnFlow: "",
+  setNodesOnFlow: (nodes: string) => "",
 };
 
 export const FlowsContext = createContext<FlowsContextType>(
@@ -106,6 +108,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   const [tabId, setTabId] = useState("");
 
   const [isLoading, setIsLoading] = useState(false);
+  const [nodesOnFlow, setNodesOnFlow] = useState("");
 
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uid());
@@ -666,6 +669,8 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
             },
           };
         });
+
+        console.log(tabsState);
       }
     } catch (err) {
       setErrorData({
@@ -730,6 +735,8 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
         isLoading,
         saveComponent,
         deleteComponent,
+        nodesOnFlow,
+        setNodesOnFlow,
       }}
     >
       {children}

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -83,6 +83,7 @@ export default function Page({
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
   const { takeSnapshot } = useContext(undoRedoContext);
+  const { nodesOnFlow, setNodesOnFlow } = useContext(FlowsContext);
 
   const position = useRef({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
@@ -219,7 +220,7 @@ export default function Page({
           ...prev,
           [tabId]: {
             ...prev[tabId],
-            isPending: true,
+            isPending: false,
           },
         };
       });
@@ -229,21 +230,30 @@ export default function Page({
 
   const onNodesChangeMod = useCallback(
     (change: NodeChange[]) => {
-      onNodesChange(change);
-      //@ts-ignore
-      setTabsState((prev: FlowsState) => {
-        return {
-          ...prev,
-          [tabId]: {
-            ...prev[tabId],
-            isPending: true,
-          },
-        };
-      });
+      const changeString = JSON.stringify(change);
+
+      if (changeString !== nodesOnFlow) {
+        onNodesChange(change);
+        updateNodeFlow(changeString);
+        //@ts-ignore
+        setTabsState((prev: FlowsState) => {
+          return {
+            ...prev,
+            [tabId]: {
+              ...prev[tabId],
+              isPending: true,
+            },
+          };
+        });
+      }
     },
-    [onNodesChange, setTabsState, tabId]
+    [onNodesChange, setTabsState, tabId, updateNodeFlow]
   );
 
+  function updateNodeFlow(changeString: string) {
+    setNodesOnFlow(changeString);
+  }
+
   const onConnect = useCallback(
     (params: Connection) => {
       takeSnapshot();

src/frontend/src/types/tabs/index.ts

@@ -55,6 +55,8 @@ export type FlowsContextType = {
   ) => Promise<String | undefined>;
   deleteComponent: (key: string) => void;
   version: string;
+  nodesOnFlow: string;
+  setNodesOnFlow: (nodes: string) => void;
 };
 
 export type FlowsState = {