Show loading indicator and announce loading if loading has not finish…

…ed within a timeout

src/contexts/LoadingContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, Dispatch, SetStateAction, useCallback } from "react";
+import React, { createContext, useCallback } from "react";
 import { ChildrenProps } from "../utilities/children-props";
 
 type LoadingContextValue = {
@@ -14,7 +14,7 @@ const defaultValue: LoadingContextValue = {
 export const LoadingContext = createContext<LoadingContextValue>(defaultValue);
 
 type LoadingContextProviderProps = ChildrenProps & {
- setIsLoading: Dispatch<SetStateAction<boolean>>
+ setIsLoading: (value: boolean) => void
 }
 
 export const LoadingContextProvider = ({ children, setIsLoading }: LoadingContextProviderProps) => {

src/pages/Page.test.tsx

@@ -1,9 +1,13 @@
 import { Page } from "./Page";
-import { render, screen, waitFor } from "@testing-library/react";
-import React, { useCallback, useState } from "react";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import React, { useCallback, useContext, useState } from "react";
 import { DocumentStateContext } from "../contexts/DocumentStateContext";
 import { ChildrenProps } from "../utilities/children-props";
 import { useFocusHashOrMainHeading } from "../hooks/focus/useFocusHashOrMainHeading";
+import { LoadingContext } from "../contexts/LoadingContext";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import userEvent from "@testing-library/user-event";
+import { asyncTimeout } from "../../test/async-timeout";
 
 jest.mock("react-router-dom");
 jest.mock("../hooks/focus/useFocusHashOrMainHeading");
@@ -12,9 +16,11 @@ let documentStateUpdated: boolean;
 
 describe(Page.name, () => {
  const pageTitle = "The Page";
+ let user: UserEvent;
 
  beforeEach(() => {
  documentStateUpdated = false;
+ user = userEvent.setup();
  });
 
  describe("under normal conditions", () => {
@@ -28,7 +34,6 @@ describe(Page.name, () => {
  </Page>
  </ContextProvider>
  );
-
  });
 
  test("sets the document title", () => {
@@ -52,6 +57,50 @@ describe(Page.name, () => {
  });
  });
 
+ describe("when loading takes a long time", () => {
+ let liveRegion: HTMLDivElement;
+
+ beforeEach(() => {
+ render(
+ <ContextProvider freshDocument={false}>
+ <Page title={pageTitle}>
+ <h1 tabIndex={-1}>Main Heading</h1>
+ <ChildComponentThatLoadsData/>
+ </Page>
+ </ContextProvider>
+ );
+
+ liveRegion = screen.getByTestId("page-live-region");
+ });
+
+ test("adds loading text to live region after timeout", async () => {
+ await user.click(screen.getByRole("button", { name: "START LOADING" }));
+ const loadingText = await within(liveRegion).findByText("loading");
+ expect(loadingText).toBeInTheDocument();
+ });
+
+ test("shows a loading indicator after timeout", async () => {
+ await user.click(screen.getByRole("button", { name: "START LOADING" }));
+ const loadingText = await screen.findByText("Loading...");
+ expect(loadingText).toBeVisible();
+ });
+
+ test("does not show loading text if loading finished within the timeout period", async () => {
+ const originalAppLoadingTimeout = process.env.REACT_APP_LOADING_TIMEOUT;
+ process.env.REACT_APP_LOADING_TIMEOUT = "250";
+
+ await user.click(screen.getByRole("button", { name: "START LOADING" }));
+ await user.click(screen.getByRole("button", { name: "STOP LOADING" }));
+
+ await asyncTimeout(parseInt(process.env.REACT_APP_LOADING_TIMEOUT!) * 2);
+
+ const loadingText = within(liveRegion).queryByText("loading");
+ expect(loadingText).not.toBeInTheDocument();
+
+ process.env.REACT_APP_LOADING_TIMEOUT = originalAppLoadingTimeout;
+ });
+ });
+
  describe("under error conditions", () => {
  const testCases = [true, false];
 
@@ -113,3 +162,12 @@ const ContextProvider = ({ children, freshDocument }: { freshDocument: boolean }
  </DocumentStateContext.Provider>
  );
 };
+
+const ChildComponentThatLoadsData = () => {
+ const { startLoading, finishLoading } = useContext(LoadingContext);
+
+ return (<>
+ <button onClick={startLoading}>START LOADING</button>
+ <button onClick={finishLoading}>STOP LOADING</button>
+ </>);
+};

src/pages/Page.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ChildrenProps } from "../utilities/children-props";
 import { DocumentStateContext } from "../contexts/DocumentStateContext";
 import { useFocusHashOrMainHeading } from "../hooks/focus/useFocusHashOrMainHeading";
 import "./Pages.css";
 import { HeadingCheck } from "../components/dev-only/HeadingCheck";
+import { LoadingContextProvider } from "../contexts/LoadingContext";
 
 type PageProps = {
  title: string
@@ -13,6 +14,20 @@ export const DOCUMENT_TITLE_SUFFIX = " - Washtenaw ID Project";
 
 export const Page = ({ title, children }: PageProps) => {
  const { documentHasBeenLoaded } = useContext(DocumentStateContext);
+ const [loadingIndicatorNeeded, setLoadingIndicatorNeeded] = useState(false);
+ const loadingTimerRef: React.MutableRefObject<NodeJS.Timeout | undefined> = useRef();
+
+ const setIsLoading = useCallback((value: boolean) => {
+ if (value) {
+ loadingTimerRef.current = setTimeout(() => {
+ setLoadingIndicatorNeeded(true);
+ }, parseInt(process.env.REACT_APP_LOADING_TIMEOUT!));
+ } else {
+ if (loadingTimerRef.current) {
+ clearTimeout(loadingTimerRef.current);
+ }
+ }
+ }, []);
 
  useFocusHashOrMainHeading();
 
@@ -26,9 +41,16 @@ export const Page = ({ title, children }: PageProps) => {
 
  return (<>
  <HeadingCheck/>
- <div className={"page-container"}>
- {children}
- <div aria-live={"polite"} data-testid={"page-live-region"}/>
- </div>
+ <LoadingContextProvider setIsLoading={setIsLoading}>
+ <div className={"page-container"}>
+ {loadingIndicatorNeeded
+ ? "Loading..."
+ : children
+ }
+ <div aria-live={"polite"}
+ data-testid={"page-live-region"}>{loadingIndicatorNeeded ? "loading" : ""}
+ </div>
+ </div>
+ </LoadingContextProvider>
  </>);
 };

src/setupTests.ts

@@ -9,6 +9,7 @@ import { toHaveNoViolations } from "jest-axe";
 
 process.env.REACT_APP_API = "test";
 process.env.REACT_APP_FOCUS_TIMEOUT = "10";
+process.env.REACT_APP_LOADING_TIMEOUT = "10";
 
 setupTestingServer();
 
@@ -18,4 +19,4 @@ global.matchMedia = global.matchMedia || function () {
  };
 };
 
-expect.extend(toHaveNoViolations);
+expect.extend(toHaveNoViolations);