Justin Edmund
778a1c70bd
## Summary - Fixed avatar showing anonymous for several seconds on page load - Eliminated hydration mismatch for authentication state - Header now shows correct user state immediately ## Root Cause AccountStateInitializer was running client-side in useEffect AFTER hydration, causing: 1. Server renders anonymous state 2. Client hydrates with anonymous state 3. useEffect runs and updates state (causing the flash) ## Solution - Read auth cookies server-side in layout.tsx - Pass initial auth data as props to AccountStateInitializer - Initialize Valtio state synchronously before first render - Client-side cookie reading only as fallback ## Changes - Added server-side cookie parsing in layout.tsx - Modified AccountStateInitializer to accept initial auth data props - Made Header component reactive with useSnapshot from Valtio - State initialization happens synchronously, preventing the flash ## Test plan - [x] Avatar renders correctly on first load - [x] No anonymous avatar flash when logged in - [x] Login/logout still works properly - [x] State updates are reactive in the header 🤖 Generated with [Claude Code](https://claude.ai/code) --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| [locale] | ||
| api | ||
| components | ||
| lib | ||
| styles | ||
| layout.tsx | ||