Skip to content

fix: prevent BookingDetailsSheet flicker when switching bookings#27894

Merged
PeerRich merged 2 commits intomainfrom
devin/1770889263-fix-booking-details-sheet-flicker
Feb 13, 2026
Merged

fix: prevent BookingDetailsSheet flicker when switching bookings#27894
PeerRich merged 2 commits intomainfrom
devin/1770889263-fix-booking-details-sheet-flicker

Conversation

@eunjae-lee
Copy link
Copy Markdown
Contributor

@eunjae-lee eunjae-lee commented Feb 12, 2026

What does this PR do?

Fixes the BookingDetailsSheet flickering (disappearing and reappearing) when clicking a different booking while the sheet is already open.

Root causes:

  1. When switching bookings, selectedBookingUid updates immediately but the new booking may not yet be in the store's bookings array (due to bi-directional URL↔store sync timing), causing getSelectedBooking() to momentarily return null → sheet unmounts → remounts once data arrives.
  2. In calendar view, clicking a different event fires Radix Dialog's onInteractOutside. The handler only checked for data-booking-list-item, so calendar events triggered the sheet to close and reopen.

Fix:

  • Use a useRef in BookingDetailsSheet to retain the last valid booking. During transitions where the new booking isn't resolved yet, the previous booking stays displayed instead of the sheet unmounting.
  • Add data-booking-calendar-event attribute to calendar Event component and update onInteractOutside to recognize both list items and calendar events.

Demo

↓ This is the flicker we were seeing on the main. Now it's gone after this PR.

Screenshot.2026-02-12.at.18.07.38.mp4

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Go to /bookings
  2. Click a booking to open the BookingDetailsSheet
  3. While the sheet is open, click a different booking in the list
  4. Expected: The sheet content transitions smoothly to the new booking without any flicker/disappear-reappear
  5. Repeat step 3 from the calendar view — same smooth behavior expected
  6. Click outside the sheet (not on a booking) — sheet should close normally
  7. Run tests: TZ=UTC yarn vitest run apps/web/modules/bookings/components/BookingDetailsSheet.test.tsx

Items for reviewer attention

  • Ref mutation during render (BookingDetailsSheet.tsx lines 68-76): lastBookingRef.current is set during render, not inside useEffect. This is an intentional and common pattern for tracking "previous value" via refs, but worth a look to confirm comfort with this approach.
  • Test coverage gap: The tests validate the store logic and simulate the ref fallback pattern imperatively, but don't render the actual BookingDetailsSheet React component (it has many dependencies that would require extensive mocking). The transition logic is the same, but the ref behavior in a real React render cycle isn't directly exercised.
  • Test file has unused imports flagged by biome (e.g. act, renderHook, React, beforeEach, vi, useStore) — these should be cleaned up.

Checklist

  • My code follows the style guidelines of this project
  • I have checked if my changes generate no new warnings
  • My PR is not too large

Link to Devin run: https://app.devin.ai/sessions/66a9d334a96d43a2b666f3b71052713b
Requested by: @eunjae-lee

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
@devin-ai-integration
Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 3 files

@github-actions
Copy link
Copy Markdown
Contributor

Devin AI is resolving merge conflicts

This PR has merge conflicts with the main branch. A Devin session has been created to automatically resolve them.

View Devin Session

Devin will:

  1. Merge the latest main into this branch
  2. Resolve any conflicts intelligently
  3. Run lint/type checks to ensure validity
  4. Push the resolved changes

If you prefer to resolve conflicts manually, you can close the Devin session and handle it yourself.

@eunjae-lee eunjae-lee marked this pull request as ready for review February 13, 2026 10:31
@graphite-app graphite-app bot requested a review from a team February 13, 2026 10:31
@graphite-app graphite-app bot added the core area: core, team members only label Feb 13, 2026
@PeerRich PeerRich merged commit 896dfd5 into main Feb 13, 2026
86 of 88 checks passed
@PeerRich PeerRich deleted the devin/1770889263-fix-booking-details-sheet-flicker branch February 13, 2026 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants