New: [AEA-6209] - Render a loading page if rendering is blocked (#1750)

## Summary

- ✨ New Feature

### Details

Render a loading page to illustrate to the user that something is
happening, in the event that a render is currently blocked while state
is being updated due to:

1. Login
2. Logout
3. Session time-outs
4. State malfunction (unknown cause)

---------

Signed-off-by: Connor Avery <214469360+connoravo-nhs@users.noreply.github.com>

Author: connoravo-nhs

packages/cpt-ui/__tests__/AccessProvider.test.tsx

@@ -7,6 +7,8 @@ import {useNavigate, useLocation} from "react-router-dom"
 import {normalizePath as mockNormalizePath} from "@/helpers/utils"
 import {logger} from "@/helpers/logger"
 import {handleRestartLogin} from "@/helpers/logout"
+import Layout from "@/Layout"
+import LoadingPage from "@/pages/LoadingPage"
 
 jest.mock("react-router-dom", () => ({
   useNavigate: jest.fn(),
@@ -21,6 +23,11 @@ jest.mock("@/context/AuthProvider", () => ({
   useAuth: jest.fn()
 }))
 
+jest.mock("@/components/EpsHeader", () => ({
+  __esModule: true,
+  default: jest.fn(() => null)
+}))
+
 jest.mock("@/constants/environment", () => ({
   FRONTEND_PATHS: {
     LOGIN: "/login",
@@ -49,7 +56,11 @@ jest.mock("@/constants/environment", () => ({
     "/privacy-notice",
     "/cookies-selected",
     "/"
-  ]
+  ],
+  APP_CONFIG: {
+    COMMIT_ID: "test-commit",
+    VERSION_NUMBER: "1.0.0"
+  }
 }))
 
 jest.mock("@/helpers/logger", () => ({
@@ -235,12 +246,14 @@ describe("AccessProvider", () => {
 
       const {container} = render(
         <AccessProvider>
-          <TestComponent />
+          <Layout>
+            <LoadingPage />
+          </Layout>
         </AccessProvider>
       )
 
-      // Should render nothing (children blocked)
-      expect(container).toBeEmptyDOMElement()
+      // Should render nothing (children blocked) - show loading wheel
+      expect(container).toBeInTheDocument()
     })
 
     it("allows children when concurrent session exists but user is on session selection page", () => {
@@ -281,12 +294,14 @@ describe("AccessProvider", () => {
 
       const {container} = render(
         <AccessProvider>
-          <TestComponent />
+          <Layout>
+            <LoadingPage />
+          </Layout>
         </AccessProvider>
       )
 
-      // Should render nothing (children blocked)
-      expect(container).toBeEmptyDOMElement()
+      // Should render nothing (children blocked) - show loading page
+      expect(container).toBeInTheDocument()
     })
   })
 

packages/cpt-ui/jest.setup.ts

@@ -7,6 +7,34 @@ jest.mock("*.css", () => ({}), {virtual: true})
 jest.mock("*.scss", () => ({}), {virtual: true})
 jest.mock("@/styles/searchforaprescription.scss", () => ({}), {virtual: true})
 
+// Mock FooterStrings to avoid import.meta issues
+jest.mock("@/constants/ui-strings/FooterStrings", () => ({
+  FOOTER_COPYRIGHT: "© NHS England",
+  COMMIT_ID: "test-commit-id",
+  VERSION_NUMBER: "test-version-number",
+  FOOTER_LINKS: [
+    {
+      text: "Privacy notice",
+      href: "/site/privacy-notice",
+      external: false,
+      testId: "eps_footer-link-privacy-notice"
+    },
+    {
+      text: "Terms and conditions (opens in new tab)",
+      // eslint-disable-next-line max-len
+      href: "https://digital.nhs.uk/services/care-identity-service/registration-authority-users/registration-authority-help/privacy-notice",
+      external: true,
+      testId: "eps_footer-link-terms-and-conditions"
+    },
+    {
+      text: "Cookie policy",
+      href: "/site/cookies",
+      external: false,
+      testId: "eps_footer-link-cookie-policy"
+    }
+  ]
+}))
+
 const cwr_cookie_value_string = JSON.stringify({"sessionId":"my_rum_session_id"})
 const cwr_cookie_value_encoded = Buffer.from(cwr_cookie_value_string, "utf-8").toString("base64")
 

packages/cpt-ui/src/Layout.tsx

@@ -4,15 +4,15 @@ import RBACBanner from "@/components/RBACBanner"
 import EpsFooter from "@/components/EpsFooter"
 import PatientDetailsBanner from "@/components/PatientDetailsBanner"
 import PrescriptionInformationBanner from "@/components/PrescriptionInformationBanner"
-import {Fragment} from "react"
+import {Fragment, ReactNode} from "react"
 
-export default function Layout() {
+export default function Layout({children}: {children?: ReactNode}) {
   return (
     <Fragment>
       <EpsHeader />
-      <PatientDetailsBanner />
-      <PrescriptionInformationBanner />
-      <Outlet />
+      {!children && <PatientDetailsBanner />}
+      {!children && <PrescriptionInformationBanner />}
+      {children ?? <Outlet />}
       <RBACBanner />
       <EpsFooter />
     </Fragment>

packages/cpt-ui/src/context/AccessProvider.tsx

@@ -12,6 +12,8 @@ import {useAuth} from "./AuthProvider"
 import {ALLOWED_NO_ROLE_PATHS, FRONTEND_PATHS, PUBLIC_PATHS} from "@/constants/environment"
 import {logger} from "@/helpers/logger"
 import {handleRestartLogin} from "@/helpers/logout"
+import LoadingPage from "@/pages/LoadingPage"
+import Layout from "@/Layout"
 
 export const AccessContext = createContext<Record<string, never> | null>(null)
 
@@ -144,7 +146,11 @@ export const AccessProvider = ({children}: { children: ReactNode }) => {
   }, [auth.isSignedIn, auth.isSigningIn, location.pathname])
 
   if (shouldBlockChildren()) {
-    return <></>
+    return (
+      <Layout>
+        <LoadingPage />
+      </Layout>
+    )
   }
 
   return (

packages/cpt-ui/src/pages/LoadingPage.tsx

@@ -0,0 +1,23 @@
+import {Col, Container, Row} from "nhsuk-react-components"
+import EpsSpinner from "@/components/EpsSpinner"
+import {usePageTitle} from "@/hooks/usePageTitle"
+import {logger} from "@/helpers/logger"
+import {normalizePath} from "@/helpers/utils"
+
+export default function LoadingPage() {
+  usePageTitle("Loading information")
+  const path = normalizePath(location.pathname)
+  logger.info(`Loading requested path: ${path}`)
+  return (
+    <main className="nhsuk-main-wrapper">
+      <Container>
+        <Row>
+          <Col width="full">
+            <h1>Loading</h1>
+            <EpsSpinner />
+          </Col>
+        </Row>
+      </Container>
+    </main>
+  )
+}