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)
+  // The content panel (right of sidebar on desktop, full-width on phone).
-  function CalendarContent() {
+  //
-    return (
+  // This is a plain JSX value, NOT a nested `function CalendarContent()` rendered
+  // as `<CalendarContent />`. A component defined inside render has a new identity
+  // every render, so React unmounts+remounts its entire subtree — including
+  // <ScheduleXCalendar> — 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 = (
       <div
         style={{
           flex: 1,
@@ -331,7 +337,6 @@ export function CalendarShell() {
         )}
       </div>
   )
-  }
 
   // ── Full layout ────────────────────────────────────────────────────────────
 
@@ -355,7 +360,7 @@ export function CalendarShell() {
           currentUserName={meQuery.data?.user.displayName ?? undefined}
         />
         <InstallPrompt />
-        <CalendarContent />
+        {calendarContent}
         <EventDetailPopover />
 
         {/* New Event FAB — phone: bottom-right floating action button (UI-SPEC §Interaction Contract) */}
@@ -457,7 +462,7 @@ export function CalendarShell() {
           </button>
         </div>
 
-        <CalendarContent />
+        {calendarContent}
       </div>
 
       {/* EventDetailPopover — standalone mode driven by Zustand openEventId */}