From e82a7410e774f36e7f78b52c61418eb19d681c28 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Sun, 26 Oct 2025 15:05:11 +0100 Subject: [PATCH] fix(agent-stream): prevent visible scroll animation on initial load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When loading an agent chat with existing messages, the ScrollView would render at the top and then animate scrolling to the bottom, creating a jarring user experience. Now the initial scroll to bottom happens instantly (no animation), and only subsequent auto-scrolls (when new messages arrive) are animated. This provides a smooth loading experience while maintaining smooth animations for new content. Changes: - Add hasScrolledInitially ref to track first scroll - Use animated: false for initial scroll, animated: true for subsequent scrolls - Remove debug console.log from scroll handler 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- packages/app/src/components/agent-stream-view.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx index 2f8b689a2..552bb7fbe 100644 --- a/packages/app/src/components/agent-stream-view.tsx +++ b/packages/app/src/components/agent-stream-view.tsx @@ -40,11 +40,14 @@ export function AgentStreamView({ const [selectedToolCall, setSelectedToolCall] = useState(null); const [isNearBottom, setIsNearBottom] = useState(true); + const hasScrolledInitially = useRef(false); - // Auto-scroll to bottom when new items arrive, but only if user is already at bottom + // Scroll to bottom immediately on initial load, then animate for new messages useEffect(() => { if (isNearBottom) { - scrollViewRef.current?.scrollToEnd({ animated: true }); + const shouldAnimate = hasScrolledInitially.current; + scrollViewRef.current?.scrollToEnd({ animated: shouldAnimate }); + hasScrolledInitially.current = true; } }, [streamItems, isNearBottom]); @@ -66,14 +69,6 @@ export function AgentStreamView({ contentSize.height - contentOffset.y - layoutMeasurement.height; // Consider user "at bottom" if within 10px of the end const nearBottom = distanceFromBottom < 10; - console.log('[AgentStreamView] Scroll:', { - contentHeight: contentSize.height, - scrollY: contentOffset.y, - layoutHeight: layoutMeasurement.height, - distanceFromBottom, - nearBottom, - currentIsNearBottom: isNearBottom - }); setIsNearBottom(nearBottom); }