VIA-558 AS/DB Add custom Link component to prevent pending requests on slow connections

Author: anoop-surej-nhs

src/app/_components/context/ClientProviders.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { BrowserContextProvider } from "@src/app/_components/context/BrowserContext";
+import { NavigationProvider } from "@src/app/_components/context/NavigationContext";
 import { InactivityDialog } from "@src/app/_components/inactivity/InactivityDialog";
 import LinksInterceptor from "@src/app/_components/interceptor/LinksInterceptor";
 import AppFooter from "@src/app/_components/nhs-frontend/AppFooter";
@@ -24,10 +25,12 @@ export function ClientProviders({ children }: Readonly<{ children: React.ReactNo
       <LinksInterceptor />
       <SkipLink />
       <SessionProvider refetchInterval={SESSION_REFETCH_SECONDS}>
-        <AppHeader />
-        <InactivityDialog />
-        <div className="nhsuk-width-container">{children}</div>
-        <AppFooter />
+        <NavigationProvider>
+          <AppHeader />
+          <InactivityDialog />
+          <div className="nhsuk-width-container">{children}</div>
+          <AppFooter />
+        </NavigationProvider>
       </SessionProvider>
     </BrowserContextProvider>
   );

src/app/_components/context/NavigationContext.test.tsx

@@ -0,0 +1,67 @@
+import { NavigationProvider, useNavigationTransition } from "@src/app/_components/context/NavigationContext";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(),
+}));
+
+const mockPush = jest.fn();
+
+const TestLink = () => {
+  const { navigate } = useNavigationTransition();
+
+  return (
+    <Link
+      href="/test-route"
+      onClick={(e) => {
+        e.preventDefault();
+        navigate("/test-route");
+      }}
+    >
+      Go to test route
+    </Link>
+  );
+};
+
+describe("NavigationProvider", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useRouter as jest.Mock).mockReturnValue({
+      push: mockPush,
+    });
+  });
+
+  it("navigates using router.push when link is clicked", () => {
+    render(
+      <NavigationProvider>
+        <TestLink />
+      </NavigationProvider>,
+    );
+
+    fireEvent.click(screen.getByText("Go to test route"));
+
+    expect(mockPush).toHaveBeenCalledWith("/test-route");
+    expect(mockPush).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not navigate when transition is pending", () => {
+    jest.spyOn(React, "useTransition").mockReturnValue([true, jest.fn()]);
+
+    render(
+      <NavigationProvider>
+        <TestLink />
+      </NavigationProvider>,
+    );
+
+    fireEvent.click(screen.getByText("Go to test route"));
+
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it("throws when hook is used outside NavigationProvider", () => {
+    expect(() => render(<TestLink />)).toThrow("useNavigationTransition must be used inside NavigationProvider");
+  });
+});

src/app/_components/context/NavigationContext.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { createContext, useContext, useTransition } from "react";
+
+type NavigationContextType = {
+  navigate: (href: string) => void;
+  isPending: boolean;
+};
+
+const NavigationContext = createContext<NavigationContextType | null>(null);
+
+const NavigationProvider = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const navigate = (href: string) => {
+    if (isPending) return;
+
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  return <NavigationContext.Provider value={{ navigate, isPending }}>{children}</NavigationContext.Provider>;
+};
+
+const useNavigationTransition = () => {
+  const context = useContext(NavigationContext);
+  if (!context) throw new Error("useNavigationTransition must be used inside NavigationProvider");
+  return context;
+};
+
+export { useNavigationTransition, NavigationProvider };

src/app/_components/hub/AgeBasedHubCards.test.tsx

@@ -1,8 +1,18 @@
+import { useNavigationTransition } from "@src/app/_components/context/NavigationContext";
 import { AgeBasedHubCards } from "@src/app/_components/hub/AgeBasedHubCards";
 import { AgeGroup } from "@src/models/ageBasedHub";
 import { VaccineInfo, VaccineType } from "@src/models/vaccine";
 import { render, screen } from "@testing-library/react";
 
+jest.mock("@src/app/_components/context/NavigationContext", () => ({
+  useNavigationTransition: jest.fn(),
+}));
+
+(useNavigationTransition as jest.Mock).mockReturnValue({
+  navigate: jest.fn(),
+  isPending: false,
+});
+
 const testData = [
   {
     ageGroup: AgeGroup.AGE_12_to_16,

src/app/_components/hub/PregnancyHubContent.test.tsx

@@ -1,6 +1,16 @@
+import { useNavigationTransition } from "@src/app/_components/context/NavigationContext";
 import { PregnancyHubContent } from "@src/app/_components/hub/PregnancyHubContent";
 import { render, screen } from "@testing-library/react";
 
+jest.mock("@src/app/_components/context/NavigationContext", () => ({
+  useNavigationTransition: jest.fn(),
+}));
+
+(useNavigationTransition as jest.Mock).mockReturnValue({
+  navigate: jest.fn(),
+  isPending: false,
+});
+
 describe("Pregnancy hub content", () => {
   beforeEach(() => {
     render(<PregnancyHubContent />);

src/app/_components/navigation/TransitionLink.test.tsx

@@ -0,0 +1,61 @@
+import { useNavigationTransition } from "@src/app/_components/context/NavigationContext";
+import { TransitionLink } from "@src/app/_components/navigation/TransitionLink";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+
+jest.mock("@src/app/_components/context/NavigationContext", () => ({
+  useNavigationTransition: jest.fn(),
+}));
+
+const mockNavigate = jest.fn();
+
+describe("TransitionLink", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("calls navigate with href when clicked", () => {
+    (useNavigationTransition as jest.Mock).mockReturnValue({
+      navigate: mockNavigate,
+      isPending: false,
+    });
+
+    render(<TransitionLink href="/test-route">Go to test</TransitionLink>);
+
+    fireEvent.click(screen.getByText("Go to test"));
+
+    expect(mockNavigate).toHaveBeenCalledWith("/test-route");
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+  });
+
+  it("sets aria-disabled when navigation is pending", () => {
+    (useNavigationTransition as jest.Mock).mockReturnValue({
+      navigate: mockNavigate,
+      isPending: true,
+    });
+
+    render(<TransitionLink href="/test-route">Go to test</TransitionLink>);
+
+    const link = screen.getByRole("link");
+
+    expect(link).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("passes className and target through to the link", () => {
+    (useNavigationTransition as jest.Mock).mockReturnValue({
+      navigate: mockNavigate,
+      isPending: false,
+    });
+
+    render(
+      <TransitionLink href="/test-route" className="test-class" target="_blank">
+        Go to test
+      </TransitionLink>,
+    );
+
+    const link = screen.getByRole("link");
+
+    expect(link).toHaveClass("test-class");
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+});

src/app/_components/navigation/TransitionLink.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useNavigationTransition } from "@src/app/_components/context/NavigationContext";
+import Link from "next/link";
+import { MouseEvent } from "react";
+
+// This is a reusable Link component that can be used to prevent multiple clicks.
+export function TransitionLink({
+  href,
+  children,
+  className,
+  target,
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  target?: string;
+}) {
+  const { navigate, isPending } = useNavigationTransition();
+
+  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    navigate(href);
+  };
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      aria-disabled={isPending}
+      className={className}
+      prefetch={false}
+      target={target}
+    >
+      {children}
+    </Link>
+  );
+}

src/app/_components/nhs-app/CardLink.test.tsx

@@ -1,6 +1,16 @@
+import { useNavigationTransition } from "@src/app/_components/context/NavigationContext";
 import CardLink from "@src/app/_components/nhs-app/CardLink";
 import { render, screen } from "@testing-library/react";
 
+jest.mock("@src/app/_components/context/NavigationContext", () => ({
+  useNavigationTransition: jest.fn(),
+}));
+
+(useNavigationTransition as jest.Mock).mockReturnValue({
+  navigate: jest.fn(),
+  isPending: false,
+});
+
 describe("CardLink", () => {
   it("should render component", () => {
     render(<CardLink title="Flu" link="/vaccines/flu" />);

src/app/_components/nhs-app/CardLink.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { TransitionLink } from "@src/app/_components/navigation/TransitionLink";
 
 interface CardProps {
   title: string;
@@ -11,9 +11,9 @@ const CardLink = (cardProps: CardProps) => {
     <li className="nhsapp-card">
       <div className="nhsapp-card__container">
         <div className="nhsapp-card__content">
-          <Link prefetch={false} href={cardProps.link} className="nhsapp-card__link nhsuk-link--no-visited-state">
+          <TransitionLink href={cardProps.link} className="nhsapp-card__link nhsuk-link--no-visited-state">
             {cardProps.title}
-          </Link>
+          </TransitionLink>
         </div>
         <svg
           className="nhsapp-icon nhsapp-icon--chevron-right"

src/app/_components/nhs-app/CardLinkWithDescription.test.tsx

@@ -1,6 +1,16 @@
+import { useNavigationTransition } from "@src/app/_components/context/NavigationContext";
 import CardLinkWithDescription from "@src/app/_components/nhs-app/CardLinkWithDescription";
 import { render, screen } from "@testing-library/react";
 
+jest.mock("@src/app/_components/context/NavigationContext", () => ({
+  useNavigationTransition: jest.fn(),
+}));
+
+(useNavigationTransition as jest.Mock).mockReturnValue({
+  navigate: jest.fn(),
+  isPending: false,
+});
+
 describe("CardLinkWithDescription", () => {
   it("should render component", () => {
     render(<CardLinkWithDescription title="Flu" description="Around 12 weeks" link="/vaccines/flu" />);