feat: Add progress bar for route loading

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/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 />