diff --git a/apps/pwa/src/components/CalendarShell.tsx b/apps/pwa/src/components/CalendarShell.tsx index 8e1d6d1..1d58635 100644 --- a/apps/pwa/src/components/CalendarShell.tsx +++ b/apps/pwa/src/components/CalendarShell.tsx @@ -236,9 +236,15 @@ export function CalendarShell() { // ── Calendar content ─────────────────────────────────────────────────────── - // The content panel (right of sidebar on desktop, full-width on phone) - function CalendarContent() { - return ( + // The content panel (right of sidebar on desktop, full-width on phone). + // + // This is a plain JSX value, NOT a nested `function CalendarContent()` rendered + // as ``. A component defined inside render has a new identity + // every render, so React unmounts+remounts its entire subtree — including + // — on ANY CalendarShell re-render (popup/form close, post- + // write events refetch). That full remount is the "calendar flash" (Bug B). As + // an element value it reconciles in place across re-renders: no remount, no flash. + const calendarContent = (
)}
- ) - } + ) // ── Full layout ──────────────────────────────────────────────────────────── @@ -355,7 +360,7 @@ export function CalendarShell() { currentUserName={meQuery.data?.user.displayName ?? undefined} /> - + {calendarContent} {/* New Event FAB — phone: bottom-right floating action button (UI-SPEC §Interaction Contract) */} @@ -457,7 +462,7 @@ export function CalendarShell() { - + {calendarContent} {/* EventDetailPopover — standalone mode driven by Zustand openEventId */}