address performance review followups

Author: dnywh

AGENTS.md

@@ -17,7 +17,7 @@ These instructions apply to the whole repository.
 ## Auth, Sessions, and Public-Page Performance
 
 - `src/proxy.ts` intentionally does not refresh Supabase auth on every request. Public pages should use `createSignedOutResponse()` so their initial response does not wait on `supabase.auth.getUser()`.
-- Only add paths to `authRequiredPathPrefixes` when the first server response must know auth state, such as protected routes, auth callbacks, and guest-only auth pages. Adding public routes there can regress TTFB, FCP, and LCP.
+- Only add paths to `authRequiredPathPrefixes` when the first server response must know auth state, such as protected routes, auth callbacks, guest-only auth pages, or routes that server-render private/public data differently. `/map` and `/listings` belong there because they call server `auth.getUser()` before choosing listing data sources.
 - Server components that branch on auth should treat `authStateHeaderName` as a forwarded proxy hint, not proof that public routes have performed a fresh auth lookup. Public pages are deliberately signed-out on the initial server render until client auth resolves.
 - Keep auth-aware public UI in small client slots or enhancements, such as `AccountButton`, `FooterLocaleSlot`, and unread chat dots. It is acceptable for these to appear or update after first paint.
 - Keep `UnreadMessagesProvider` scoped to tab-bar and chat layouts rather than the root layout. It should not make public HTML wait on Supabase, and its initial auth/unread check should remain idle or otherwise deferred.

docs/auth-session-architecture.md

@@ -8,9 +8,9 @@ Peels keeps public pages fast by avoiding a server-side Supabase auth refresh un
 
 - Auth-required paths use `updateSession()`. This creates a Supabase server client, calls `supabase.auth.getUser()`, refreshes cookies when needed, forwards `x-peels-auth-state`, and applies auth redirects for protected or guest-only pages.
 - Public paths use `createSignedOutResponse()`. This forwards the current path and a signed-out auth hint without calling Supabase, so pages such as `/`, `/share`, and static content do not block first paint on auth.
-- `authRequiredPathPrefixes` should stay small. Add to it only when the first server response truly needs auth state.
+- `authRequiredPathPrefixes` should stay small. Add to it only when the first server response truly needs auth state. `/map` and `/listings` belong there because they server-render auth-aware listing data before client hydration.
 
-The forwarded auth state is a rendering hint. On public routes, it intentionally says signed-out on the initial server render even if the browser has a valid session cookie. Client-side auth slots can then resolve the real state after hydration.
+The forwarded auth state is a rendering hint. On public routes that do not need server auth, it intentionally says signed-out on the initial server render even if the browser has a valid session cookie. Client-side auth slots can then resolve the real state after hydration.
 
 ## Locale Behaviour
 
@@ -38,7 +38,7 @@ The unread check should stay deferred so it does not delay public HTML. If the u
 
 The homepage should server-render useful static content first, then hydrate dynamism later.
 
-- `IntroHeader` owns the static hero frame and primary calls to action.
+- `IntroHeader` reserves the hero visual space without server-rendering the decorative map/avatar/pin frame.
 - `DeferredIntroHeaderRotator` loads the animated hero rotator after the first paint/idle window.
 - `PeelsHowItWorks` keeps crawlable explanatory content in the initial HTML.
 - Deferred demo components load map, listing, chat, and photo demos after intersection or idle.

src/components/DeferredIntroHeaderRotator/DeferredIntroHeaderRotator.tsx

@@ -2,39 +2,24 @@
 
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
-
-type IdleWindow = Window & {
-  requestIdleCallback?: (
-    callback: () => void,
-    options?: { timeout?: number }
-  ) => number;
-  cancelIdleCallback?: (handle: number) => void;
-};
+import { scheduleIdleTask } from "@/utils/scheduleIdleTask";
 
 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)), []);
+  useEffect(
+    () =>
+      scheduleIdleTask(() => setIsReady(true), {
+        timeout: 1_500,
+        fallbackDelay: 250,
+      }),
+    []
+  );
 
   return isReady ? <IntroHeaderRotator /> : null;
 }

src/contexts/UnreadMessagesContext.tsx

@@ -11,6 +11,7 @@ import {
 import { createClient } from "@/utils/supabase/client";
 import { usePathname } from "next/navigation";
 import { getChatThreadIdFromPathname } from "@/features/chat/chatRoutes";
+import { scheduleIdleTask } from "@/utils/scheduleIdleTask";
 import type { Dispatch, PropsWithChildren, SetStateAction } from "react";
 
 type ThreadReadStatus = Record<string, boolean>;
@@ -34,29 +35,6 @@ const UnreadMessagesContext = createContext<
 >(undefined);
 const isAuthDebugEnabled = process.env.NEXT_PUBLIC_AUTH_DEBUG === "true";
 
-type IdleWindow = Window & {
-  requestIdleCallback?: (
-    callback: () => void,
-    options?: { timeout?: number }
-  ) => number;
-  cancelIdleCallback?: (handle: number) => void;
-};
-
-function scheduleIdleTask(callback: () => void) {
-  const idleWindow = window as IdleWindow;
-
-  if (typeof idleWindow.requestIdleCallback === "function") {
-    const idleCallbackId = idleWindow.requestIdleCallback(callback, {
-      timeout: 2_000,
-    });
-
-    return () => idleWindow.cancelIdleCallback?.(idleCallbackId);
-  }
-
-  const timeoutId = globalThis.setTimeout(callback, 250);
-  return () => globalThis.clearTimeout(timeoutId);
-}
-
 export function UnreadMessagesProvider({ children }: PropsWithChildren) {
   const [unreadCount, setUnreadCount] = useState(0);
   const [threadReadStatus, setThreadReadStatus] = useState<ThreadReadStatus>(

src/hooks/useDeferredHomepageDemo.ts

@@ -1,29 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-
-type IdleWindow = Window & {
-  requestIdleCallback?: (
-    callback: () => void,
-    options?: { timeout?: number }
-  ) => number;
-  cancelIdleCallback?: (handle: number) => void;
-};
-
-function scheduleIdleTask(callback: () => void) {
-  const idleWindow = window as IdleWindow;
-
-  if (typeof idleWindow.requestIdleCallback === "function") {
-    const idleCallbackId = idleWindow.requestIdleCallback(callback, {
-      timeout: 2_000,
-    });
-
-    return () => idleWindow.cancelIdleCallback?.(idleCallbackId);
-  }
-
-  const timeoutId = globalThis.setTimeout(callback, 300);
-  return () => globalThis.clearTimeout(timeoutId);
-}
+import { scheduleIdleTask } from "@/utils/scheduleIdleTask";
 
 export function useDeferredHomepageDemo() {
   const [isReady, setIsReady] = useState(false);
@@ -35,7 +13,10 @@ export function useDeferredHomepageDemo() {
     }
 
     const markReady = () => setIsReady(true);
-    const cancelIdleTask = scheduleIdleTask(markReady);
+    const cancelIdleTask = scheduleIdleTask(markReady, {
+      timeout: 2_000,
+      fallbackDelay: 300,
+    });
     const observer =
       "IntersectionObserver" in window
         ? new IntersectionObserver(

src/proxy.ts

@@ -33,6 +33,8 @@ const authRequiredPathPrefixes = [
   "/auth",
   "/chats",
   "/forgot-password",
+  "/listings",
+  "/map",
   "/profile",
   "/sign-in",
   "/sign-up",
@@ -46,7 +48,7 @@ function shouldUpdateSession(request: NextRequest) {
 
 export async function proxy(request: NextRequest) {
   // Public routes deliberately skip Supabase auth refresh for first-paint
-  // performance. Auth-aware client slots converge after hydration.
+  // performance. Routes that server-render auth-aware data stay above.
   const response = shouldUpdateSession(request)
     ? await updateSession(request)
     : createSignedOutResponse(request);

src/utils/scheduleIdleTask.ts

@@ -0,0 +1,30 @@
+type IdleWindow = Window & {
+  requestIdleCallback?: (
+    callback: () => void,
+    options?: { timeout?: number }
+  ) => number;
+  cancelIdleCallback?: (handle: number) => void;
+};
+
+type ScheduleIdleTaskOptions = {
+  timeout?: number;
+  fallbackDelay?: number;
+};
+
+export function scheduleIdleTask(
+  callback: () => void,
+  { timeout = 2_000, fallbackDelay = 250 }: ScheduleIdleTaskOptions = {}
+) {
+  const idleWindow = window as IdleWindow;
+
+  if (typeof idleWindow.requestIdleCallback === "function") {
+    const idleCallbackId = idleWindow.requestIdleCallback(callback, {
+      timeout,
+    });
+
+    return () => idleWindow.cancelIdleCallback?.(idleCallbackId);
+  }
+
+  const timeoutId = globalThis.setTimeout(callback, fallbackDelay);
+  return () => globalThis.clearTimeout(timeoutId);
+}