fix: Always center flows on load

theopensystemslab · Nov 14, 2024 · 021e047 · 021e047
1 parent 1b02cfd
commit 021e047
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/EndPoint.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/EndPoint.tsx
@@ -1,5 +1,10 @@
 import React, { useEffect, useRef } from "react";
-import { Link } from "react-navi";
+import {
+  Link,
+  useCurrentRoute,
+  useLoadingRoute,
+  useNavigation,
+} from "react-navi";
 import scrollIntoView from "scroll-into-view-if-needed";
 
 import { rootFlowPath } from "../../../../../routes/utils";
@@ -14,24 +19,29 @@ const EndPoint: React.FC<{ text: string }> = ({ text }) => {
 
   const href = rootFlowPath(false);
 
+  const currentPath = rootFlowPath(true);
+  const isLoading = useLoadingRoute();
+
   useEffect(() => {
     if (isStart && el.current) {
+      if (isLoading) return;
+
       scrollIntoView(
         el.current,
         flowLayout === FlowLayout.TOP_DOWN
           ? {
-              scrollMode: "if-needed",
+              scrollMode: "always",
               block: "nearest",
               inline: "center",
             }
           : {
-              scrollMode: "if-needed",
+              scrollMode: "always",
               block: "center",
               inline: "nearest",
             },
       );
     }
-  }, [flowLayout, isStart]);
+  }, [flowLayout, isStart, currentPath, isLoading]);
 
   return (
     <li