Check when client side has rendered globally

app/(gcforms)/[locale]/layout.tsx

@@ -1,7 +1,13 @@
 import { auth } from "@lib/auth";
 import { ClientContexts } from "@clientComponents/globals/ClientContexts";
+import { HydrationCheck } from "@clientComponents/globals";
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
   const session = await auth();
-  return <ClientContexts session={session}>{children}</ClientContexts>;
+  return (
+    <>
+      <HydrationCheck />
+      <ClientContexts session={session}>{children}</ClientContexts>;
+    </>
+  );
 }

app/(language selection)/page.tsx

@@ -3,7 +3,7 @@ import { languages } from "@i18n/settings";
 import { useTranslation } from "@i18n/client";
 import Link from "next/link";
 import { Fip } from "@clientComponents/globals";
-import { themes } from "@clientComponents/globals";
+import { themes, HydrationCheck } from "@clientComponents/globals";
 
 import { SiteLogo } from "@serverComponents/icons";
 
@@ -46,6 +46,7 @@ const Home = () => {
         {" "}
         <Fip className="my-0 py-6" />
       </header>
+      <HydrationCheck />
       <div className="flex flex-col h-full">
         <div id="page-container">
           <main id="content">

components/clientComponents/forms/Form/Form.tsx

@@ -29,7 +29,6 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
   const [formTimerState, { startTimer, checkTimer, disableTimer }] = useFormTimer();
   const [submitTooEarly, setSubmitTooEarly] = useState(false);
   const screenReaderRemainingTime = useRef(formTimerState.remainingTime);
-  const [formReady, setFormReady] = useState(false);
 
   // calculate initial delay for submit timer
   const secondsBaseDelay = 2;
@@ -44,13 +43,11 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
   useEffect(() => {
     if (!formTimerEnabled && !formTimerState.canSubmit) {
       disableTimer();
-      setFormReady(true);
     }
   }, [disableTimer, formTimerEnabled, formTimerState.canSubmit]);
 
   useEffect(() => {
     if (formTimerEnabled) {
-      if (formTimerState.timerDelay) setFormReady(true);
       // Initiate a callback to ensure that state of submit button is correctly displayed
 
       // Calling the checkTimer modifies the state of the formTimerState
@@ -65,7 +62,6 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
 
   return (
     <>
-      {formReady && <div id="form-ready-indicator" aria-hidden={true} />}
       <div
         className={classNames({
           "border-l-2": submitTooEarly,

components/clientComponents/globals/ClientContexts.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { SessionProvider } from "next-auth/react";
 import { Session } from "next-auth";
 import { AccessControlProvider } from "@lib/hooks/useAccessControl";

components/clientComponents/globals/HydrationCheck.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export const HydrationCheck = () => {
+  const [hydrationComplete, setHydrationComplete] = useState(false);
+
+  useEffect(() => {
+    setHydrationComplete(true);
+  }, []);
+
+  return <>{hydrationComplete && <div id="hydration-complete" />}</>;
+};

components/clientComponents/globals/index.ts

@@ -7,3 +7,4 @@ export { Footer } from "./Footer";
 export { SkipLink } from "./SkipLink";
 export * as Alert from "./Alert/Alert";
 export { ErrorStatus } from "./Alert/Alert";
+export { HydrationCheck } from "./HydrationCheck";

cypress/e2e/form-builder/add-elements.cy.ts

@@ -1,8 +1,6 @@
 describe("Test FormBuilder Add Elements", () => {
   beforeEach(() => {
     cy.visitPage("/en/form-builder/0000/edit");
-    // Lang switcher only appears after page hydration
-    cy.get('[data-testid="lang-switcher"]').should("be.visible");
   });
 
   it("Adds a Page Text element", () => {

cypress/e2e/form-builder/form-builder-modal-description.cy.ts

@@ -1,8 +1,6 @@
 describe("Form builder modal description", () => {
   beforeEach(() => {
     cy.visitPage("/en/form-builder/0000/edit");
-    // Lang switcher only appears after page hydration
-    cy.get('[data-testid="lang-switcher"]').should("be.visible");
   });
 
   it("Renders matching element description in more modal", () => {

cypress/e2e/form-builder/form-builder.cy.ts

@@ -10,8 +10,6 @@ describe("Test FormBuilder", () => {
 
   it("Designs a form", () => {
     cy.visitPage("/en/form-builder/0000/edit");
-    // Lang switcher only appears after page hydration
-    cy.get('[data-testid="lang-switcher"]').should("be.visible");
     cy.typeInField("#formTitle", "Cypress Test Form");
     cy.typeInField(`[aria-label="Introduction"]`, "form description");
     cy.get("button").contains("Add").click();

cypress/e2e/form-builder/names-and-titles.cy.ts

@@ -2,8 +2,6 @@ describe("Form builder names and titles", () => {
   beforeEach(() => {
     cy.userSession();
     cy.visitPage("/en/form-builder/0000/edit");
-    // Lang switcher only appears after page hydration
-    cy.get('[data-testid="lang-switcher"]').should("be.visible");
   });
 
   it("Autocompletes name with title on focus", () => {

cypress/e2e/form-builder/ownership.cy.ts

@@ -17,18 +17,20 @@ describe("Form Ownership", () => {
   describe("Admin User", () => {
     beforeEach(() => {
       cy.userSession({ admin: true });
+      cy.visitPage(`/en/form-builder/${formID}/settings/manage`);
     });
     it("Admin can manage Form Ownership", () => {
-      cy.visitPage(`/en/form-builder/${formID}/settings/manage`);
       cy.get("h2").contains("Manage ownership").should("be.visible");
+      cy.get("[data-testid='form-ownership']").should("exist");
     });
 
     it("Must have at least one owner", () => {
-      cy.visitPage(`/en/form-builder/${formID}/settings/manage`);
       cy.get("h2").contains("Manage ownership").should("be.visible");
+      cy.get("[data-testid='form-ownership']").should("exist");
 
       cy.get("[aria-label='Remove test.user@cds-snc.ca']").click();
-      cy.get("[aria-label='Remove test.user@cds-snc.ca']").should("not.exist");
+      cy.get("[data-testid='form-ownership']").should("not.contain", "test.user@cds-snc.ca");
+
       cy.get("[data-testid='save-ownership']").click();
       cy.get("[data-testid='alert']")
         .contains("Must assign at least one user")

cypress/e2e/form-builder/share.cy.ts

@@ -3,8 +3,6 @@ describe("Form builder share", () => {
     beforeEach(() => {
       cy.userSession();
       cy.visitPage("/en/form-builder/0000/edit");
-      // Lang switcher only appears after page hydration
-      cy.get('[data-testid="lang-switcher"]').should("be.visible");
     });
 
     it("Renders share flyout with name check", () => {

cypress/e2e/your_account_user_profile.cy.ts

@@ -6,7 +6,6 @@ describe("User profile", () => {
 
     it("Can navigate to Profile page", () => {
       cy.visitPage("/en/forms");
-      cy.get('[data-testid="resume-editing-form"]').should("not.exist");
       cy.get("button[id^='radix-']").click();
       cy.get("[data-testid='yourAccountDropdownContent']").contains("Profile").click();
       cy.url().should("include", "/profile");
@@ -22,7 +21,6 @@ describe("User profile", () => {
     });
     it("Renders the My Account dropdown as non-admin", () => {
       cy.visitPage("/en/forms");
-      cy.get('[data-testid="resume-editing-form"]').should("not.exist");
       cy.get("[data-testid='yourAccountDropdownContent']").should("not.exist");
       cy.get("button[id^='radix-']").click();
       cy.get("[data-testid='yourAccountDropdownContent']").should("be.visible");
@@ -38,7 +36,6 @@ describe("User profile", () => {
     });
     it("Can navigate to Profile page", () => {
       cy.visitPage("/en/forms");
-      cy.get('[data-testid="resume-editing-form"]').should("not.exist");
       cy.get("button[id^='radix-']").click();
       cy.get("[data-testid='yourAccountDropdownContent']").contains("Profile").click();
       cy.url().should("include", "/profile");
@@ -49,7 +46,6 @@ describe("User profile", () => {
     });
     it("Renders the My Account dropdown as admin", () => {
       cy.visitPage("/en/forms");
-      cy.get('[data-testid="resume-editing-form"]').should("not.exist");
       cy.get("[data-testid='yourAccountDropdownContent']").should("not.exist");
       cy.get("button[id^='radix-']").click();
       cy.get("[data-testid='yourAccountDropdownContent']").should("be.visible");

cypress/support/commands/commands.ts

@@ -122,8 +122,6 @@ Cypress.Commands.add("useForm", (file, published = true) => {
  */
 Cypress.Commands.add("visitForm", (formID, language = "en") => {
   cy.visitPage(`/${language}/id/${formID}`);
-  cy.get("main").should("be.visible");
-  cy.get("#form-ready-indicator").should("exist");
 });
 
 /**
@@ -134,6 +132,7 @@ Cypress.Commands.add("visitPage", (path) => {
 
   cy.get("#react-hydration-loader").should("not.exist");
   cy.get("main").should("be.visible");
+  cy.get("#hydration-complete").should("exist");
   //  cy.waitForIdleNetwork();
 });