Fixed past and future state on undo redo, removed loading on flow page

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

@@ -166,14 +166,9 @@ export default function Page({
 
   const edgeUpdateSuccessful = useRef(true);
 
-  const [loading, setLoading] = useState(true);
-
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
-  const timeoutRef = useRef<NodeJS.Timeout>();
-
   useEffect(() => {
-    setLoading(true);
     if (reactFlowInstance) {
       resetFlow({
         nodes: flow?.data?.nodes ?? [],
@@ -182,20 +177,6 @@ export default function Page({
       });
     }
 
-    // Clear the previous timeout
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    // Create a new timeout
-    timeoutRef.current = setTimeout(() => {
-      setLoading(false);
-    }, 300);
-
-    // Clear the timeout when the component is unmounted
-    return () => {
-      clearTimeout(timeoutRef.current);
-    };
   }, [currentFlowId, reactFlowInstance]);
 
   const onConnectMod = useCallback(
@@ -392,14 +373,6 @@ export default function Page({
             {Object.keys(templates).length > 0 &&
             Object.keys(types).length > 0 ? (
               <div id="react-flow-id" className="h-full w-full">
-                <div
-                  className={cn(
-                    "relative flex h-full w-full items-center justify-center bg-background",
-                    !loading ? "hidden" : ""
-                  )}
-                >
-                  <Loading />
-                </div>
                 <ReactFlow
                   nodes={nodes}
                   edges={edges}

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

@@ -32,10 +32,6 @@ export default function ExtraSidebar(): JSX.Element {
   const getFilterEdge = useTypesStore((state) => state.getFilterEdge);
   const setFilterEdge = useTypesStore((state) => state.setFilterEdge);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
-  const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
-  const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
-  const nodes = useFlowStore((state) => state.nodes);
-  const edges = useFlowStore((state) => state.edges);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const hasStore = useStoreStore((state) => state.hasStore);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);

src/frontend/src/stores/flowsManagerStore.ts

@@ -351,7 +351,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     const newState = useFlowStore.getState();
     const currentFlowId = get().currentFlowId;
     const pastLength = past[currentFlowId]?.length ?? 0;
-    const pastState = past[currentFlowId][pastLength - 1] ?? null;
+    const pastState = past[currentFlowId]?.[pastLength - 1] ?? null;
 
     if (pastState) {
       past[currentFlowId] = past[currentFlowId].slice(0, pastLength - 1);
@@ -370,7 +370,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     const newState = useFlowStore.getState();
     const currentFlowId = get().currentFlowId;
     const futureLength = future[currentFlowId]?.length ?? 0;
-    const futureState = future[currentFlowId][futureLength - 1] ?? null;
+    const futureState = future[currentFlowId]?.[futureLength - 1] ?? null;
 
     if (futureState) {
       future[currentFlowId] = future[currentFlowId].slice(0, futureLength - 1);