feat(motion): fade the page in only after the first load (ENG-154)

[odanieldcs]

Summary

• The first document load stays opaque, so the LCP is the hero or cover instead of the header name. Later client navigations still fade in over 200ms.
• When that fade will run, the top bar shows on click and stays until page-in ends. The corner message waits until the load passes 1s.

Delta vs ENG-154

The ticket asked to skip the fade on the initial load (example: an attribute on <html> set on the first client navigation) and to leave the header, footer, loading bar, and reduced motion unchanged.

• No attribute on <html>. PageEnter reads a module flag only in the state initializer, so the class is born on later mounts. An attribute on <html> would match the already painted wrapper again, and animation-fill-mode: both would drop its opacity to 0.
• The loading bar did change. The old bar waited 100ms and disappeared when the route committed, so the first click had no feedback while the new page sat at opacity 0. If the next page will fade, the bar appears on click and stays until page-in ends.
• The corner message does not appear on click. It shows only if loading passes 1s (ENG-149 used 2s). With reduced motion, the bar still waits 100ms, and an instant prefetch still has no indicator.
• Notion: Motion & Loading in doc 5, both the transition bullet and the feedback bullet. Doc 6 does not record this decision.

Lighthouse mobile, median of 3, CLI default. New baseline: / 3394ms (hero daniel_castro_profile_3.jpg); post 2933ms (cover postgresql-pgadmin-docker-compose.jpg). The ENG-149 comparison of 3388ms vs 3387ms measured the header on both sides.

Test plan

• Load /, /about, and a post: no fade, LCP is the image.
• Click a header link in light and dark: the page fades in, and the bar is visible during the fade.
• A fast navigation does not show "O conteúdo está sendo carregado".
• With reduced motion, the click does not fade and does not flash the bar.
• pnpm test and pnpm test:e2e pass.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
danieldcs-com	Ready	Preview	Oct 10, 2026 8:36pm UTC