diff --git a/apps/web/components/marketing-auth-buttons.tsx b/apps/web/components/marketing-auth-buttons.tsx index c8e7b8a..a126603 100644 --- a/apps/web/components/marketing-auth-buttons.tsx +++ b/apps/web/components/marketing-auth-buttons.tsx @@ -5,9 +5,14 @@ import Link from 'next/link'; import { useEffect, useState } from 'react'; /** - * Marketing-header CTAs that reflect the session: a logged-in visitor sees a - * "Dashboard" link instead of the sign-in buttons. The session cookie is - * httpOnly, so login state is probed via /v1/auth/me. + * Marketing-header CTA that reflects the session: logged-out visitors see a + * "Login" button, signed-in users see "Dashboard". Same button slot so the + * header layout doesn't shift between states. + * + * While the auth probe is in flight (`authed === null`) we default to the + * logged-out label — most marketing-page visitors are anonymous, so this + * avoids a "Dashboard → Login" flicker for them. Authed users see a single + * "Login → Dashboard" swap once the /v1/auth/me round-trip completes. */ export function MarketingAuthButtons() { const [authed, setAuthed] = useState(null); @@ -18,32 +23,14 @@ export function MarketingAuthButtons() { .catch(() => setAuthed(false)); }, []); - if (authed) { - return ( - - Dashboard - - ); - } + const showDashboard = authed === true; - // Logged out — or still resolving — show the default sign-in CTAs. return ( - <> - - Sign in - - - Start building - - + + {showDashboard ? 'Dashboard' : 'Login'} + ); }