avoid account button auth flash (#73)

* avoid account button auth flash

* use fade-in account button loading state

* hide invisible account button from focus

* tidy account button fade state

Author: dnywh

e2e/home.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { HOST_EMAIL, signIn } from "./helpers";
 
 test("homepage hydrates without chat date mismatches", async ({
   browser,
@@ -108,3 +109,57 @@ test("homepage drop-off only shows curated featured hosts", async ({
     page.getByTestId("homepage-featured-host-demo-newtown-worm-farm")
   ).toHaveCount(0);
 });
+
+test("homepage account button stays hidden while signed-in profile state loads", async ({
+  page,
+}) => {
+  await signIn(page, { email: HOST_EMAIL, redirectTo: "/profile" });
+
+  let resolveProfileRequest = () => {};
+  const profileRequestStarted = new Promise<void>((resolve) => {
+    resolveProfileRequest = resolve;
+  });
+  let continueProfileRequest = () => {};
+  const profileRequestCanContinue = new Promise<void>((resolve) => {
+    continueProfileRequest = resolve;
+  });
+
+  await page.route(/\/rest\/v1\/profiles(?:\?|$)/, async (route) => {
+    const request = route.request();
+
+    if (
+      request.method() === "GET" &&
+      request.url().includes("select=first_name")
+    ) {
+      resolveProfileRequest();
+      await profileRequestCanContinue;
+    }
+
+    await route.continue();
+  });
+
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await profileRequestStarted;
+
+  try {
+    await expect(page.getByTestId("account-button-profile")).toHaveCount(0);
+    await expect(page.getByTestId("account-button-sign-in")).toHaveCount(0);
+  } finally {
+    continueProfileRequest();
+  }
+
+  const profileAccountButton = page.getByTestId("account-button-profile");
+
+  await expect(profileAccountButton).toHaveAttribute("href", "/profile");
+  await expect(profileAccountButton).toHaveCSS("opacity", "1");
+});
+
+test("homepage account button links guests to sign in", async ({ page }) => {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+
+  await expect(page.getByTestId("account-button-sign-in")).toHaveAttribute(
+    "href",
+    "/sign-in"
+  );
+  await expect(page.getByTestId("account-button-profile")).toHaveCount(0);
+});

src/components/AccountButton/AccountButton.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import { styled } from "next-yak";
 import Button from "@/components/Button";
 import { useAuthUser } from "@/hooks/useAuthUser";
 import type { LinkButtonProps } from "@/components/Button";
@@ -13,16 +15,69 @@ type AccountButtonProps = Omit<
 export default function AccountButton({ ...props }: AccountButtonProps) {
   const t = useTranslations("Actions");
   const tCommon = useTranslations("Common");
-  const { user, profileFirstName } = useAuthUser({ includeProfile: true });
+  const { user, profileFirstName, isLoading } = useAuthUser({
+    includeProfile: true,
+  });
+  const [isReadyToShow, setIsReadyToShow] = useState(false);
   const label = profileFirstName?.trim() || tCommon("account");
 
+  useEffect(() => {
+    if (isLoading) {
+      setIsReadyToShow(false);
+      return;
+    }
+
+    const animationFrame = window.requestAnimationFrame(() => {
+      setIsReadyToShow(true);
+    });
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [isLoading]);
+
+  if (isLoading) {
+    return null;
+  }
+
+  const hiddenButtonProps = !isReadyToShow
+    ? ({
+        "aria-hidden": true,
+        tabIndex: -1,
+      } satisfies Pick<LinkButtonProps, "aria-hidden" | "tabIndex">)
+    : {};
+
   return user ? (
-    <Button href="/profile" variant="secondary" {...props}>
+    <FadingAccountButton
+      href="/profile"
+      variant="secondary"
+      {...props}
+      {...hiddenButtonProps}
+      $visible={isReadyToShow}
+      data-testid="account-button-profile"
+    >
       {label}
-    </Button>
+    </FadingAccountButton>
   ) : (
-    <Button href="/sign-in" variant="secondary" {...props}>
+    <FadingAccountButton
+      href="/sign-in"
+      variant="secondary"
+      {...props}
+      {...hiddenButtonProps}
+      $visible={isReadyToShow}
+      data-testid="account-button-sign-in"
+    >
       {t("signIn")}
-    </Button>
+    </FadingAccountButton>
   );
 }
+
+const FadingAccountButton = styled(Button)<{ $visible: boolean }>`
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  pointer-events: ${({ $visible }) => ($visible ? "auto" : "none")};
+  transition: opacity 160ms ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;