Stop the backdrop flashing on an in-place dialog swap
What & why
Swapping items in the detail dialog (a "similar images" click) flashed the background for a frame. The content swap itself is already instant (animateEntrance), but the swap remounts the whole ItemDetailDialog — it's keyed by item id to reset per-item state — which remounts the Radix <Dialog> and re-fades its backdrop overlay in from transparent. For that frame the grid behind showed through at full brightness.
DialogContent now accepts an overlayClassName, and the detail dialog uses it to suppress the overlay's enter fade on a swap (animateEntrance === false). The close fade-out (data-[state=closed]) is untouched, and a fresh open still fades the backdrop in normally.
Checklist
- User-facing change → PostHog event, or N/A — pure animation fix
- New error paths report via
captureServerException/ the error boundary, or N/A - New behavior is covered by tests, or N/A — visual/animation only (jsdom has no layout engine);
DialogContentchange is an additive optional prop - If this fixes a recurring defect, considered a guardrail, or N/A
Notes
Please verify on deploy. If any residual flash remains it'd be from the Radix remount itself (scroll-lock/focus re-init) rather than the overlay — the fuller fix there is to keep the <Dialog> mounted across swaps and remount only its inner content, a larger refactor I've kept out of this change.
Summary by cubic
Fixes the backdrop flashing when swapping items in the detail dialog so the grid behind no longer shows through for a frame.
The swap remounts the whole ItemDetailDialog (keyed by item id), which remounts the Radix <Dialog> and re-fades its backdrop in from transparent. DialogContent now accepts an overlayClassName, and the detail dialog uses it to suppress the overlay's enter fade on a swap. The close fade-out and fresh-open fade-in are preserved.
jsdom can't test this animation, so verify on deploy — any residual flash would come from the Radix remount itself, not the overlay.