improve first paint performance

Author: dnywh

e2e/home.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
-import { HOST_EMAIL, signIn } from "./helpers";
+import { DONOR_EMAIL, HOST_EMAIL, signIn } from "./helpers";
 
-test("homepage hydrates without chat date mismatches", async ({
+test("homepage renders static content before deferred chat demo hydrates", async ({
   browser,
   page,
 }) => {
@@ -42,9 +42,6 @@ test("homepage hydrates without chat date mismatches", async ({
   const serverDayLabels = await serverPage
     .getByTestId("chat-day-label")
     .allTextContents();
-  const serverTimestamps = await serverPage
-    .getByTestId("chat-message-timestamp")
-    .allTextContents();
   await serverContext.close();
 
   await page.waitForLoadState("networkidle");
@@ -59,9 +56,9 @@ test("homepage hydrates without chat date mismatches", async ({
     .getByTestId("chat-message-timestamp")
     .allTextContents();
 
-  expect(serverDayLabels).toEqual(["Thu, May 1", "Fri, May 2"]);
+  expect(serverDayLabels).toEqual([]);
   expect(hydratedDayLabels).toEqual(["Yesterday", "Today"]);
-  expect(hydratedTimestamps).toEqual(serverTimestamps);
+  expect(hydratedTimestamps).toHaveLength(2);
   expect(
     pageErrors.some((message) => message.includes("Minified React error #418"))
   ).toBeFalsy();
@@ -152,6 +149,7 @@ test("homepage account button stays hidden while signed-in profile state loads",
 
   await expect(profileAccountButton).toHaveAttribute("href", "/profile");
   await expect(profileAccountButton).toHaveCSS("opacity", "1");
+  await expect(page.getByTestId("locale-picker-select")).toHaveCount(0);
 });
 
 test("homepage account button links guests to sign in", async ({ page }) => {
@@ -162,4 +160,40 @@ test("homepage account button links guests to sign in", async ({ page }) => {
     "/sign-in"
   );
   await expect(page.getByTestId("account-button-profile")).toHaveCount(0);
+  await expect(page.getByTestId("locale-picker-select")).toBeVisible();
+});
+
+test("homepage unread chat dot appears after scoped unread check", async ({
+  page,
+}) => {
+  await page.route(/\/rest\/v1\/chat_threads(?:\?|$)/, async (route) => {
+    if (route.request().method() !== "GET") {
+      await route.continue();
+      return;
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify([{ id: "33333333-3333-4333-8333-333333333333" }]),
+    });
+  });
+  await page.route(
+    /\/rest\/v1\/rpc\/unread_chat_thread_ids(?:\?|$)/,
+    async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([
+          { thread_id: "33333333-3333-4333-8333-333333333333" },
+        ]),
+      });
+    }
+  );
+
+  await signIn(page, { email: DONOR_EMAIL, redirectTo: "/" });
+
+  await expect(page.getByTestId("tab-unread-dot").first()).toBeVisible({
+    timeout: 15_000,
+  });
 });

src/app/(core)/(interact)/(centered)/layout.tsx

@@ -1,5 +1,6 @@
 import TabBar from "@/components/TabBar";
 import { TabBarProvider } from "@/contexts/TabBarContext";
+import { UnreadMessagesProvider } from "@/contexts/UnreadMessagesContext";
 import { styled } from "next-yak";
 import { theme } from "@/styles/theme.yak";
 import type { ReactNode } from "react";
@@ -22,11 +23,13 @@ const CenteredPage = styled.div`
 export default async function Layout({ children }: { children: ReactNode }) {
   return (
     <TabBarProvider>
-      <CenteredPage>
-        <TabBar breakpoint="md" position="dynamic" />
-        {children}
-        <TabBar breakpoint="sm" />
-      </CenteredPage>
+      <UnreadMessagesProvider>
+        <CenteredPage>
+          <TabBar breakpoint="md" position="dynamic" />
+          {children}
+          <TabBar breakpoint="sm" />
+        </CenteredPage>
+      </UnreadMessagesProvider>
     </TabBarProvider>
   );
 }

src/app/(core)/(interact)/(stretched)/chats/[threadId]/page.tsx

@@ -1,8 +1,7 @@
-import { createClient } from "@/utils/supabase/server";
 import { ChatConversationClient } from "@/components/ChatPageClient";
-import { getSelectedChatThread, isUuid } from "@/features/chat/chatData";
+import { isUuid } from "@/features/chat/chatData";
+import { getCurrentSelectedChatThread } from "@/features/chat/chatPageData";
 import { redirect } from "next/navigation";
-import { cache } from "react";
 import type { Metadata } from "next";
 import { siteConfig } from "@/config/site";
 import { createPeelsMetadata, noindexFollowMetadata } from "@/utils/seo";
@@ -13,33 +12,10 @@ type ChatThreadPageProps = {
   }>;
 };
 
-const getChatThreadPageData = cache(async (threadId: string) => {
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
-  if (!user) {
-    return {
-      user: null,
-      selectedThread: null,
-    };
-  }
-
-  const selectedThread = await getSelectedChatThread(
-    supabase,
-    user.id,
-    threadId
-  );
-
-  return {
-    user,
-    selectedThread,
-  };
-});
-
 function getChatThreadTitle(
-  selectedThread: Awaited<ReturnType<typeof getSelectedChatThread>>,
+  selectedThread: Awaited<
+    ReturnType<typeof getCurrentSelectedChatThread>
+  >["selectedThread"],
   userId: string
 ) {
   if (!selectedThread) return "Chats";
@@ -65,7 +41,7 @@ export async function generateMetadata({
     });
   }
 
-  const { user, selectedThread } = await getChatThreadPageData(threadId);
+  const { user, selectedThread } = await getCurrentSelectedChatThread(threadId);
 
   if (!user) {
     return createPeelsMetadata({
@@ -98,7 +74,7 @@ export default async function ChatThreadPage({ params }: ChatThreadPageProps) {
     redirect("/chats");
   }
 
-  const { user, selectedThread } = await getChatThreadPageData(threadId);
+  const { user, selectedThread } = await getCurrentSelectedChatThread(threadId);
 
   if (!user) {
     redirect(`/sign-in?redirect_to=/chats/${threadId}`);

src/app/(core)/(interact)/(stretched)/chats/layout.tsx

@@ -1,6 +1,5 @@
-import { createClient } from "@/utils/supabase/server";
 import ChatPageClient from "@/components/ChatPageClient";
-import { getChatThreads } from "@/features/chat/chatData";
+import { getCurrentChatThreads } from "@/features/chat/chatPageData";
 import { currentPathHeaderName } from "@/utils/supabase/authState";
 import { normaliseNextPath } from "@/utils/authRedirects";
 import { headers } from "next/headers";
@@ -16,19 +15,14 @@ export default async function ChatsLayout({
 }: {
   children: ReactNode;
 }) {
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const { user, threads } = await getCurrentChatThreads();
 
   if (!user) {
     const currentPath = (await headers()).get(currentPathHeaderName);
     const redirectTo = normaliseNextPath(currentPath, "/chats");
     redirect(`/sign-in?redirect_to=${encodeURIComponent(redirectTo)}`);
   }
 
-  const threads = await getChatThreads(supabase, user.id);
-
   return (
     <ChatPageClient user={user} initialThreads={threads}>
       {children}

src/app/(core)/(interact)/(stretched)/layout.tsx

@@ -1,5 +1,6 @@
 import TabBar from "@/components/TabBar";
 import { TabBarProvider } from "@/contexts/TabBarContext";
+import { UnreadMessagesProvider } from "@/contexts/UnreadMessagesContext";
 import { styled } from "next-yak";
 import { theme } from "@/styles/theme.yak";
 import type { ReactNode } from "react";
@@ -20,11 +21,13 @@ const StretchedPage = styled.div`
 export default async function Layout({ children }: { children: ReactNode }) {
   return (
     <TabBarProvider>
-      <StretchedPage>
-        <TabBar breakpoint="md" />
-        {children}
-        <TabBar breakpoint="sm" />
-      </StretchedPage>
+      <UnreadMessagesProvider>
+        <StretchedPage>
+          <TabBar breakpoint="md" />
+          {children}
+          <TabBar breakpoint="sm" />
+        </StretchedPage>
+      </UnreadMessagesProvider>
     </TabBarProvider>
   );
 }

src/app/(core)/(static)/layout.tsx

@@ -1,5 +1,6 @@
 import TabBar from "@/components/TabBar";
 import { TabBarProvider } from "@/contexts/TabBarContext";
+import { UnreadMessagesProvider } from "@/contexts/UnreadMessagesContext";
 import SiteFooter from "@/components/SiteFooter";
 import { styled } from "next-yak";
 import AccountButton from "@/components/AccountButton";
@@ -25,13 +26,15 @@ const StaticPage = styled.div`
 export default async function Layout({ children }: { children: ReactNode }) {
   return (
     <TabBarProvider>
-      <StaticPage>
-        <StyledAccountButton />
-        <TabBar breakpoint="md" position="fixed" />
-        {children}
-        <SiteFooter />
-        <TabBar breakpoint="sm" />
-      </StaticPage>
+      <UnreadMessagesProvider>
+        <StaticPage>
+          <StyledAccountButton />
+          <TabBar breakpoint="md" position="fixed" />
+          {children}
+          <SiteFooter />
+          <TabBar breakpoint="sm" />
+        </StaticPage>
+      </UnreadMessagesProvider>
     </TabBarProvider>
   );
 }

src/app/layout.tsx

@@ -11,7 +11,6 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import "./globals.css";
 import "./theme.css";
 
-import { UnreadMessagesProvider } from "@/contexts/UnreadMessagesContext";
 import AttributionCapture from "@/components/AttributionCapture";
 import AuthHashCompletion from "@/components/AuthHashCompletion";
 import JsonLd from "@/components/JsonLd";
@@ -104,9 +103,7 @@ export default async function RootLayout({
         {inlineFontFaces ? <style>{inlineFontFaces}</style> : null}
         <AuthHashCompletion />
         <AttributionCapture />
-        <NextIntlClientProvider>
-          <UnreadMessagesProvider>{children}</UnreadMessagesProvider>
-        </NextIntlClientProvider>
+        <NextIntlClientProvider>{children}</NextIntlClientProvider>
         <Analytics />
         <SpeedInsights />
       </body>

src/components/DeferredIntroHeaderRotator/DeferredIntroHeaderRotator.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+
+type IdleWindow = Window & {
+  requestIdleCallback?: (
+    callback: () => void,
+    options?: { timeout?: number }
+  ) => number;
+  cancelIdleCallback?: (handle: number) => void;
+};
+
+const IntroHeaderRotator = dynamic(
+  () => import("@/components/IntroHeader/IntroHeaderRotator"),
+  { ssr: false }
+);
+
+function scheduleIdleTask(callback: () => void) {
+  const idleWindow = window as IdleWindow;
+
+  if (typeof idleWindow.requestIdleCallback === "function") {
+    const idleCallbackId = idleWindow.requestIdleCallback(callback, {
+      timeout: 1_500,
+    });
+
+    return () => idleWindow.cancelIdleCallback?.(idleCallbackId);
+  }
+
+  const timeoutId = globalThis.setTimeout(callback, 250);
+  return () => globalThis.clearTimeout(timeoutId);
+}
+
+export default function DeferredIntroHeaderRotator() {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => scheduleIdleTask(() => setIsReady(true)), []);
+
+  return isReady ? <IntroHeaderRotator /> : null;
+}

src/components/DeferredIntroHeaderRotator/index.ts

@@ -0,0 +1 @@
+export { default } from "./DeferredIntroHeaderRotator";

src/components/DeferredPeelsChatDemo/DeferredPeelsChatDemo.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+import HomepageDemoPlaceholder from "@/components/HomepageDemoPlaceholder";
+import { useDeferredHomepageDemo } from "@/hooks/useDeferredHomepageDemo";
+
+const PeelsChatDemo = dynamic(() => import("@/components/PeelsChatDemo"), {
+  ssr: false,
+  loading: () => <HomepageDemoPlaceholder variant="chat" />,
+});
+
+export default function DeferredPeelsChatDemo() {
+  const { isReady, rootRef } = useDeferredHomepageDemo();
+
+  return (
+    <div ref={rootRef} data-testid="homepage-chat-demo-shell">
+      {isReady ? <PeelsChatDemo /> : <HomepageDemoPlaceholder variant="chat" />}
+    </div>
+  );
+}