From 75895b17d4e54a7164233a8949d4e3b06174499f Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Sat, 3 Jan 2026 21:52:17 +0700 Subject: [PATCH] fix(sidebar): eliminate tap delay by triggering animation directly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The animation was waiting ~32ms for React's useEffect cycle before starting. Now handleAgentSelectMobile triggers the close animation immediately using withTiming on shared values, bypassing useEffect. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- packages/app/src/components/sliding-sidebar.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/app/src/components/sliding-sidebar.tsx b/packages/app/src/components/sliding-sidebar.tsx index 52e1812d7..e0ed06dff 100644 --- a/packages/app/src/components/sliding-sidebar.tsx +++ b/packages/app/src/components/sliding-sidebar.tsx @@ -47,7 +47,9 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) { useEffect(() => { // Don't animate if we're in the middle of a gesture - if (isGesturing.value) return; + if (isGesturing.value) { + return; + } const width = isMobile ? windowWidth : DESKTOP_SIDEBAR_WIDTH; translateX.value = withTiming(isOpen ? 0 : -width, { @@ -92,8 +94,17 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) { // Mobile: close sidebar when agent is selected const handleAgentSelectMobile = useCallback(() => { - close(); - }, [close]); + // Start animation immediately, don't wait for useEffect + translateX.value = withTiming(-windowWidth, { + duration: ANIMATION_DURATION, + easing: ANIMATION_EASING, + }); + backdropOpacity.value = withTiming(0, { + duration: ANIMATION_DURATION, + easing: ANIMATION_EASING, + }); + close(); // Update state for consistency + }, [close, translateX, backdropOpacity, windowWidth]); // Close gesture (swipe left to close when sidebar is open) const closeGesture = Gesture.Pan()