Skip to content

Conversation

@ibetitsmike
Copy link
Contributor

Problem

When switching between Review and Costs tabs in the right sidebar, the sidebar would visually jump—appearing to briefly collapse before expanding to the correct width.

Root Cause

Race condition between two components sharing state:

  • RightSidebar owned selectedTab state via usePersistedState
  • AIView listened to that state with { listener: true } and derived sidebarWidth

When clicking a tab, RightSidebar rendered immediately with the new tab but stale width props from AIView (which had not re-rendered yet), causing a visual jump during the intermediate state.

Solution

  1. Lift tab state to AIView - Now owns both selectedTab and width, passing them together to RightSidebar. This eliminates the render race where tab and width could be out of sync.

  2. Keep sidebar DOM mounted when collapsed - Changed from return null to rendering with width: 0px and isCollapsed prop. This preserves the CSS transition target so width changes animate smoothly.

  3. Return actual stored width from hook - useResizableSidebar now returns undefined when no custom width exists (allowing auto-wide mode for Review) and returns the stored custom width regardless of enabled state (keeping width stable during tab switches).

Testing

  • Rapidly switch between Review and Costs tabs
  • Verify smooth 200ms transition without visual jump
  • Confirm tab selection persists across page reload
  • Confirm custom widths (after drag-resize) persist per-tab

Generated with mux • Model: mux-gateway:anthropic/claude-opus-4-5 • Thinking: high

Lift tab state ownership from RightSidebar to AIView so that selectedTab
and width update atomically in a single render pass.

Previously, RightSidebar owned selectedTab state while AIView derived
width from it via a listener. When clicking a tab, RightSidebar re-rendered
immediately with the new tab but stale width props, causing a visual jump.

Also fix useResizableSidebar to return undefined when no custom width has
been saved, allowing Review tab to use auto-wide mode by default. This
ensures smooth transitions between the actual widths of each tab.
The isHidden state was stale when tab changed, causing sidebar to briefly
return null before the effect ran to update isHidden. Now we check the tab
synchronously - review tab is never hidden regardless of stale isHidden state.
When sidebar was hidden via 'return null', the DOM element was removed.
When switching to review tab, the sidebar would re-mount at full width
with no element to transition FROM, causing a visual pop.

Now we render with width:0px when collapsed, keeping the DOM element
present so CSS transitions can animate smoothly from 0 to target width.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant