💄 Header - Mobile header flashes flag/Contact for one frame before hiding

[joshbermanssw]

Sub-issue of the AI for Business Leaders performance PBI. Highest blast radius of the set — schedule it last.

Description

CLS is 0.133 and the cause is already documented in the code. app/components/header-appearance.tsx carries this note:

client context → SSR shows full header for one frame before hiding flag/contact. Upgrade path if the flash matters: set x-pathname in middleware.ts and resolve appearance server-side in app/layout.tsx so the header renders correctly at SSR.

The header server-renders with the country flag and the Contact button present. After hydration, useMobileHeaderAppearance pushes the page's appearance into context and both are removed, reflowing the header and everything below it.

This page sets both flags in content/eventsv2/ai-for-business-leaders.json:

"appearance": { "hideFlag": true, "hideContactButton": true }

so it takes the full shift.

Proposed solution

Follow the upgrade path already written in the comment:

1. Set an x-pathname header in middleware.ts
2. Resolve the page's appearance server-side in app/layout.tsx and render the header correctly on the first paint
3. Keep the client context as the mechanism for client-side navigations

Because this touches middleware and the root layout, it affects every route — test broadly.

Acceptance criteria

1. The header renders in its final form on first paint, with no post-hydration flag/Contact removal
2. CLS on /events/ai-for-business-leaders is below 0.1
3. Client-side navigation between a page that hides the flag and one that doesn't still updates the header correctly
4. The homepage, consulting pages and event pages all render the correct header variant
5. No hydration mismatch warnings

[joshbermanssw]

Re-scoped — this is no longer a CLS bug.

CLS is now 0.000 on /events/ai-for-business-leaders, measured 27 Jul on the mobile preset. It came back as exactly zero in all six runs (three baseline, three with third-party scripts blocked). The 0.133 that motivated this issue is gone, and the parent PBI's "CLS under 0.1" criterion is already met.

The code is unchanged, so the behaviour it describes still happens — header-appearance.tsx still resolves appearance through client context, and the header still shows the flag and Contact button for one frame before hydration removes them. It just no longer produces measurable layout shift.

That changes what this issue is: a cosmetic flash rather than a scored performance defect. Retitled to match. The proposed solution below is still the right fix and still correct as written — but since it touches middleware.ts and the root layout, it now carries the highest blast radius of anything in #4894 for the smallest measurable return. Worth doing on its own merits, not as perf work.

Acceptance criterion 2 ("CLS below 0.1") is already satisfied and can be struck.