Revert "Revert "feat: Pesist FlowEditor state on route changes"" (#…

…3694)

editor.planx.uk/src/components/EditorNavMenu.tsx

@@ -13,8 +13,8 @@ import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Role } from "@opensystemslab/planx-core/types";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React from "react";
-import { useCurrentRoute, useNavigation } from "react-navi";
+import React, { useRef } from "react";
+import { useCurrentRoute, useLoadingRoute, useNavigation } from "react-navi";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import EditorIcon from "ui/icons/Editor";
 
@@ -26,6 +26,11 @@ interface Route {
   disabled?: boolean;
 }
 
+interface RoutesForURL {
+  routes: Route[];
+  compact: boolean;
+}
+
 const MENU_WIDTH_COMPACT = "51px";
 const MENU_WIDTH_FULL = "164px";
 
@@ -104,6 +109,7 @@ const MenuButton = styled(IconButton, {
 function EditorNavMenu() {
   const { navigate } = useNavigation();
   const { url } = useCurrentRoute();
+  const isRouteLoading = useLoadingRoute();
   const [teamSlug, flowSlug, user, canUserEditTeam, flowAnalyticsLink] =
     useStore((state) => [
       state.teamSlug,
@@ -225,14 +231,29 @@ function EditorNavMenu() {
     ...flowAnalyticsRoute,
   ];
 
-  const getRoutesForUrl = (
-    url: string,
-  ): { routes: Route[]; compact: boolean } => {
-    if (flowSlug && url.includes(flowSlug))
-      return { routes: flowLayoutRoutes, compact: true };
-    if (teamSlug && url.includes(teamSlug))
-      return { routes: teamLayoutRoutes, compact: false };
-    return { routes: globalLayoutRoutes, compact: false };
+  const defaultRoutes: RoutesForURL = {
+    routes: globalLayoutRoutes,
+    compact: false,
+  };
+  const previousRoutes = useRef<RoutesForURL>(defaultRoutes);
+
+  const getRoutesForUrl = (url: string): RoutesForURL => {
+    // Return the previous value when route is loading to avoid flash of incorrect version
+    if (isRouteLoading) return previousRoutes.current;
+
+    let result: RoutesForURL;
+
+    if (flowSlug && url.includes(flowSlug)) {
+      result = { routes: flowLayoutRoutes, compact: true };
+    } else if (teamSlug && url.includes(teamSlug)) {
+      result = { routes: teamLayoutRoutes, compact: false };
+    } else {
+      result = defaultRoutes;
+    }
+
+    previousRoutes.current = result;
+
+    return result;
   };
 
   const { routes, compact } = getRoutesForUrl(url.href);

editor.planx.uk/src/components/RouteLoadingIndicator.tsx

@@ -0,0 +1,36 @@
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import { styled } from "@mui/material/styles";
+import React, { useEffect, useState } from "react";
+import { useLoadingRoute } from "react-navi";
+
+const Root = styled(Box)({
+  width: "100%",
+  position: "fixed",
+  top: 0,
+  left: 0,
+});
+
+const RouteLoadingIndicator: React.FC<{
+  msDelayBeforeVisible?: number;
+}> = ({ msDelayBeforeVisible = 50 }) => {
+  const isLoading = useLoadingRoute();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!isLoading) return setIsVisible(false);
+
+    const timer = setTimeout(() => setIsVisible(true), msDelayBeforeVisible);
+    return () => clearTimeout(timer);
+  }, [isLoading, msDelayBeforeVisible]);
+
+  if (!isVisible) return null;
+
+  return (
+    <Root role="alert" aria-busy="true" aria-live="assertive">
+      <LinearProgress />
+    </Root>
+  );
+};
+
+export default RouteLoadingIndicator;

editor.planx.uk/src/index.tsx

@@ -12,13 +12,12 @@ import ErrorPage from "pages/ErrorPage";
 import { AnalyticsProvider } from "pages/FlowEditor/lib/analytics/provider";
 import React, { Suspense, useEffect } from "react";
 import { createRoot } from "react-dom/client";
-import { NotFoundBoundary, Router, useLoadingRoute, View } from "react-navi";
+import { NotFoundBoundary, Router, View } from "react-navi";
 import HelmetProvider from "react-navi-helmet-async";
 import { ToastContainer } from "react-toastify";
 
 // init airbrake before everything else
 import * as airbrake from "./airbrake";
-import DelayedLoadingIndicator from "./components/DelayedLoadingIndicator";
 import { client } from "./lib/graphql";
 import navigation from "./lib/navigation";
 import { defaultTheme } from "./theme";
@@ -55,8 +54,6 @@ const hasJWT = (): boolean | void => {
 const Layout: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const isLoading = useLoadingRoute();
-
   useEffect(() => {
     const observer = new MutationObserver(() => {
       // set the page title based on whatever heading is currently shown
@@ -82,11 +79,7 @@ const Layout: React.FC<{
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={defaultTheme}>
         <NotFoundBoundary render={() => <ErrorPage title="Not found" />}>
-          {isLoading ? (
-            <DelayedLoadingIndicator msDelayBeforeVisible={500} />
-          ) : (
-            children
-          )}
+          {children}
         </NotFoundBoundary>
       </ThemeProvider>
     </StyledEngineProvider>

editor.planx.uk/src/pages/FlowEditor/index.tsx

@@ -4,6 +4,7 @@ import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import { HEADER_HEIGHT_EDITOR } from "components/Header";
 import React, { useRef } from "react";
+import { useCurrentRoute } from "react-navi";
 
 import Flow from "./components/Flow";
 import Sidebar from "./components/Sidebar";
@@ -18,7 +19,9 @@ const EditorContainer = styled(Box)(() => ({
   maxHeight: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
 }));
 
-const FlowEditor: React.FC<any> = ({ flow, breadcrumbs }) => {
+const FlowEditor = () => {
+  const [ flow, ...breadcrumbs ] = useCurrentRoute().url.pathname.split("/").at(-1)?.split(",") || [];
+
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   useScrollControlsAndRememberPosition(scrollContainerRef);
   const showSidebar = useStore((state) => state.showSidebar);

editor.planx.uk/src/pages/Login.tsx

@@ -5,7 +5,9 @@ import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import React from "react";
+import { useLoadingRoute } from "react-navi";
 
 const Wrapper = styled(Box)(({ theme }) => ({
   width: "100vw",
@@ -46,6 +48,9 @@ const LoginButton = styled(Button)(({ theme }) => ({
 }));
 
 const Login: React.FC = () => {
+  const isLoading = useLoadingRoute();
+  if (isLoading) return <DelayedLoadingIndicator />;
+
   return (
     <Wrapper>
       <LoginContainer>

editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx

@@ -3,6 +3,7 @@ import { containerClasses } from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import EditorNavMenu from "components/EditorNavMenu";
 import { HEADER_HEIGHT_EDITOR } from "components/Header";
+import RouteLoadingIndicator from "components/RouteLoadingIndicator";
 import React, { PropsWithChildren } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -36,6 +37,7 @@ const DashboardContainer = styled(Box)(({ theme }) => ({
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <>
+    <RouteLoadingIndicator />
     <Header />
     <DashboardWrap>
       <EditorNavMenu />

editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx

@@ -1,9 +1,13 @@
 import ErrorFallback from "components/ErrorFallback";
+import FlowEditor from "pages/FlowEditor";
 import React, { PropsWithChildren } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 const FlowEditorLayout: React.FC<PropsWithChildren> = ({ children }) => (
-  <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+  <ErrorBoundary FallbackComponent={ErrorFallback}>
+    <FlowEditor />
+    {children}
+  </ErrorBoundary>
 );
 
 export default FlowEditorLayout;