From 7b55740a9eb393025f81400a43223de4ebd24274 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Sat, 3 Jan 2026 21:55:40 +0700 Subject: [PATCH] fix(sidebar): use fast fade instead of slide when navigating MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Slide animation freezes halfway when navigation starts. Now uses instant snap + 100ms backdrop fade for agent selection. Gestures still use the slide animation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- packages/app/src/components/sliding-sidebar.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/app/src/components/sliding-sidebar.tsx b/packages/app/src/components/sliding-sidebar.tsx index e0ed06dff..61c0fc12f 100644 --- a/packages/app/src/components/sliding-sidebar.tsx +++ b/packages/app/src/components/sliding-sidebar.tsx @@ -93,17 +93,15 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) { }, []); // Mobile: close sidebar when agent is selected + // Use a quick fade instead of slide since navigation interrupts the animation const handleAgentSelectMobile = useCallback(() => { - // Start animation immediately, don't wait for useEffect - translateX.value = withTiming(-windowWidth, { - duration: ANIMATION_DURATION, - easing: ANIMATION_EASING, - }); + // Fast fade out - slide animations freeze during navigation backdropOpacity.value = withTiming(0, { - duration: ANIMATION_DURATION, + duration: 100, easing: ANIMATION_EASING, }); - close(); // Update state for consistency + translateX.value = -windowWidth; // Snap immediately + close(); }, [close, translateX, backdropOpacity, windowWidth]); // Close gesture (swipe left to close when sidebar is open)