ROOT CAUSE: Race condition where StationsPage renders before auth
token is ready, causing DOM state mismatch.
Timeline of the bug:
1. Auth0 sets isAuthenticated=true
2. App renders StationsPage before isAuthInitialized=true
3. useSavedStations hook is disabled (enabled: false)
4. Google Maps loads and manipulates DOM
5. Auth token finally acquired, isAuthInitialized=true
6. Component re-renders with query now enabled
7. React tries to remove DOM nodes already removed by Google Maps
8. NotFoundError: removeChild fails
SOLUTION: Add isAuthGateReady check in App.tsx before rendering
protected routes. Show "Initializing session..." until auth gate is
fully initialized.
Changes:
- Import useIsAuthInitialized hook in App.tsx
- Call hook in App component
- Add guard check after isAuthenticated check
- Show loading UI if authenticated but auth gate not ready
- Add debug logs to track render flow
Now the page won't render until BOTH:
1. isAuthenticated=true (Auth0)
2. isAuthInitialized=true (our token gate)
This prevents the race condition that causes the removeChild DOM error.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
f1dd48808b