jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): use fast fade instead of slide when navigating

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2026-01-03 21:55:40 +07:00
co-authored by Claude Opus 4.5
parent 75895b17d4
commit 7b55740a9e
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/sliding-sidebar.tsx
+5 -7
View File
@@ -93,17 +93,15 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
}, []); }, []);
// Mobile: close sidebar when agent is selected // Mobile: close sidebar when agent is selected
// Use a quick fade instead of slide since navigation interrupts the animation
const handleAgentSelectMobile = useCallback(() => { const handleAgentSelectMobile = useCallback(() => {
// Start animation immediately, don't wait for useEffect // Fast fade out - slide animations freeze during navigation
translateX.value = withTiming(-windowWidth, {
duration: ANIMATION_DURATION,
easing: ANIMATION_EASING,
});
backdropOpacity.value = withTiming(0, { backdropOpacity.value = withTiming(0, {
duration: ANIMATION_DURATION, duration: 100,
easing: ANIMATION_EASING, easing: ANIMATION_EASING,
}); });
close(); // Update state for consistency translateX.value = -windowWidth; // Snap immediately
close();
}, [close, translateX, backdropOpacity, windowWidth]); }, [close, translateX, backdropOpacity, windowWidth]);
// Close gesture (swipe left to close when sidebar is open) // Close gesture (swipe left to close when sidebar is open)