From a4bd110f1c48fb31d69b7da706811a31cc73fcdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 16 Sep 2024 17:27:56 +0100
Subject: [PATCH] feat: Add progress bar for route loading

---
 .../src/components/RouteLoadingIndicator.tsx  | 36 +++++++++++++++++++
 .../src/pages/layout/AuthenticatedLayout.tsx  |  2 ++
 2 files changed, 38 insertions(+)
 create mode 100644 editor.planx.uk/src/components/RouteLoadingIndicator.tsx

diff --git a/editor.planx.uk/src/components/RouteLoadingIndicator.tsx b/editor.planx.uk/src/components/RouteLoadingIndicator.tsx
new file mode 100644
index 0000000000..72c6852ce2
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx b/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx
index 437ddee99b..6f93190696 100644
--- a/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx
+++ b/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 />