Fix SSR/hydration timezone flip in event date and time display #95

Merged

chrisp merged 1 commit from fix/event-schedule-timezone-display into main

2026-06-17 06:09:30 +00:00

chrisp commented

2026-06-17 05:47:47 +00:00

Owner

Summary

Adds useHasMounted hook (using useSyncExternalStore — no extra render cycle) to gate UTC timestamp formatting to client-only
Fixes the visible time-flip in EventSchedule and UpcomingCalendarPanel where SSR rendered UTC time (e.g. "9:00 PM") and the client re-rendered with local time (e.g. "2:00 PM PDT") after hydration, with suppressHydrationWarning silently hiding the mismatch
Fixes formatEventDate in date-utils.ts (and EventSchedule's private copy) to parse YYYY-MM-DD strings as local midnight instead of UTC midnight, correcting an off-by-one day bug for UTC-negative users across all callers

Test plan

Navigate to a sports season page — confirm event times show in local timezone with no flash/flip on load
Hard-reload the page — confirm no brief UTC time visible before settling on local time
Check the home page UpcomingCalendarPanel — confirm same behavior
Verify dates display correctly (e.g. no "Jun 17" showing for a "Jun 18" event near midnight UTC)

## Summary - Adds `useHasMounted` hook (using `useSyncExternalStore` — no extra render cycle) to gate UTC timestamp formatting to client-only - Fixes the visible time-flip in `EventSchedule` and `UpcomingCalendarPanel` where SSR rendered UTC time (e.g. "9:00 PM") and the client re-rendered with local time (e.g. "2:00 PM PDT") after hydration, with `suppressHydrationWarning` silently hiding the mismatch - Fixes `formatEventDate` in `date-utils.ts` (and `EventSchedule`'s private copy) to parse `YYYY-MM-DD` strings as local midnight instead of UTC midnight, correcting an off-by-one day bug for UTC-negative users across all callers ## Test plan - [ ] Navigate to a sports season page — confirm event times show in local timezone with no flash/flip on load - [ ] Hard-reload the page — confirm no brief UTC time visible before settling on local time - [ ] Check the home page `UpcomingCalendarPanel` — confirm same behavior - [ ] Verify dates display correctly (e.g. no "Jun 17" showing for a "Jun 18" event near midnight UTC)

chrisp added 1 commit 2026-06-17 05:47:48 +00:00

Fix SSR/hydration timezone flip in event date and time display

🚀 Deploy / 🧪 Test (pull_request) Successful in 4m0s

Details

🚀 Deploy / ʦ🔍 Typecheck & Lint (pull_request) Successful in 1m26s

Details

🚀 Deploy / 🐳 Build (pull_request) Has been skipped

Details

🚀 Deploy / 🚀 Deploy (pull_request) Has been skipped

Details

8a9cffd076

UTC timestamps rendered with date-fns format() or toLocaleTimeString() use the
runtime's local timezone, causing the server (UTC) and client (PDT) to produce
different output. suppressHydrationWarning was hiding the mismatch but the
visual time-flip was still visible on load.

- Add useHasMounted hook (useSyncExternalStore-based, no extra render cycle)
- Gate UTC timestamp formatting behind isMounted in EventSchedule and
  UpcomingCalendarPanel; SSR always renders the stable YYYY-MM-DD eventDate string
- Fix formatEventDate in date-utils.ts (and EventSchedule private copy) to parse
  YYYY-MM-DD as local midnight instead of UTC midnight, fixing the off-by-one day
  bug for UTC-negative users across all callers

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>