Fix mobile page freeze after closing lightbox opened from history drawer - #34
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
When a user opened the history drawer on mobile, tapped an image/video to open it in the lightbox, then closed the lightbox, the entire page became unresponsive (history icon, controls, sidebar – nothing worked). Root cause: openLightbox() batched setShowGallery(false) and setIsFullscreen(true) into the same React render, so the vaul drawer's 200ms close animation overlapped with the Radix Dialog opening. Two concurrent dismissable-layer / react-remove-scroll instances would race on cleanup and leave pointer-events:none or aria-hidden/inert stuck on body-level DOM nodes. Fix in use-studio-ui.ts: - openLightbox() now reads the current drawer state via a ref (no dep array churn) and, when a drawer is open on mobile, closes it then waits 300ms (200ms animation + 100ms margin) before opening the Dialog. This makes the sequence strictly sequential – only one modal is ever active at a time. - closeLightbox() replaces the single requestAnimationFrame cleanup with a 300ms setTimeout so it runs after Radix's full close-animation teardown (75ms animation + aria-hidden/remove-scroll cleanup). It also removes stuck aria-hidden and inert attributes from direct body children in a single combined querySelectorAll pass, guarded by a check that no other modal is open. - Both timer refs are properly cancelled on component unmount. Tests: added 5 regression tests using vi.useFakeTimers() that validate the new timing behaviour. Co-authored-by: CanyoufeeltheAGI <255605710+CanyoufeeltheAGI@users.noreply.github.com>
…nder lint error - Remove '@testing-library/dom' from production dependencies in package.json (was accidentally added by npm install during dev; it's a peer dep of @testing-library/react and already in bun.lock as a transitive dep). This restores bun install --frozen-lockfile compatibility. - Fix ESLint react-hooks/refs error: remove the 'drawerOpenRef.current = ...' assignment that was happening during render. Replace with direct inclusion of showGallery and showLeftSidebar in the openLightbox useCallback dep array. The ref was used to avoid adding these values to the dep array, but the linter correctly flags render-time ref mutations. The dep-array approach is simpler and equally correct. Co-authored-by: CanyoufeeltheAGI <255605710+CanyoufeeltheAGI@users.noreply.github.com>
Fixed in commit 37c648c. Two issues were blocking CI:
Both |
closeLightboxcleanup withsetTimeout(300)and comprehensive body attribute resetvi.useFakeTimers()@testing-library/domfrom productiondependencies(was accidentally added by npm install; restoresbun install --frozen-lockfilecompatibility)react-hooks/refserror: replace render-timedrawerOpenRef.currentassignment with direct dep array inclusion ofshowGallery/showLeftSidebarbun install --frozen-lockfilepasses ✓bun run lintpasses with 0 errors ✓use-studio-uitests pass ✓💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.