fix: Add loading indicator to public pages (#3714)

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

@@ -0,0 +1,10 @@
+import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
+import React from "react";
+import { useLoadingRoute, View } from "react-navi";
+
+export const loadingView = () => <LoadingLayout />;
+
+export const LoadingLayout = () => {
+  const isLoading = useLoadingRoute();
+  return isLoading ? <DelayedLoadingIndicator /> : <View />;
+};

editor.planx.uk/src/routes/index.tsx

@@ -1,4 +1,5 @@
-import { lazy, map, mount, redirect, route } from "navi";
+import { compose, lazy, map, mount, redirect, route, withView } from "navi";
+import { loadingView } from "pages/layout/LoadingLayout";
 import * as React from "react";
 
 import { client } from "../lib/graphql";
@@ -58,27 +59,36 @@ const editorRoutes = mount({
 
 const mountPayRoutes = () =>
   map(async () => {
+    compose(withView(loadingView));
     return lazy(() => import("./pay"));
   });
 
 export default isPreviewOnlyDomain
-  ? mount({
-      "/:team/:flow/published": lazy(() => import("./published")), // XXX: keeps old URL working, but only for the team listed in the domain.
-      "/:flow": lazy(() => import("./published")),
-      "/:flow/pay": mountPayRoutes(),
-      // XXX: We're not sure where to redirect `/` to so for now we'll just return the default 404
-      // "/": redirect("somewhere?"),
-    })
-  : mount({
-      "/:team/:flow/published": lazy(() => import("./published")), // loads current published flow if exists, or throws Not Found if unpublished
-      "/canterbury/find-out-if-you-need-planning-permission/preview": map(
-        async (req) =>
-          redirect(
-            `/canterbury/find-out-if-you-need-planning-permission/published${req?.search}`,
-          ),
-      ), // temporary redirect while Canterbury works with internal IT to update advertised service links
-      "/:team/:flow/preview": lazy(() => import("./preview")), // loads current draft flow and latest published external portals, or throws Not Found if any external portal is unpublished
-      "/:team/:flow/draft": lazy(() => import("./draft")), // loads current draft flow and draft external portals
-      "/:team/:flow/pay": mountPayRoutes(),
-      "*": editorRoutes,
-    });
+  ? compose(
+      withView(loadingView),
+
+      mount({
+        "/:team/:flow/published": lazy(() => import("./published")), // XXX: keeps old URL working, but only for the team listed in the domain.
+        "/:flow": lazy(() => import("./published")),
+        "/:flow/pay": mountPayRoutes(),
+        // XXX: We're not sure where to redirect `/` to so for now we'll just return the default 404
+        // "/": redirect("somewhere?"),
+      }),
+    )
+  : compose(
+      withView(loadingView),
+
+      mount({
+        "/:team/:flow/published": lazy(() => import("./published")), // loads current published flow if exists, or throws Not Found if unpublished
+        "/canterbury/find-out-if-you-need-planning-permission/preview": map(
+          async (req) =>
+            redirect(
+              `/canterbury/find-out-if-you-need-planning-permission/published${req?.search}`,
+            ),
+        ), // temporary redirect while Canterbury works with internal IT to update advertised service links
+        "/:team/:flow/preview": lazy(() => import("./preview")), // loads current draft flow and latest published external portals, or throws Not Found if any external portal is unpublished
+        "/:team/:flow/draft": lazy(() => import("./draft")), // loads current draft flow and draft external portals
+        "/:team/:flow/pay": mountPayRoutes(),
+        "*": editorRoutes,
+      }),
+    );