mirror of
https://github.com/getpaseo/paseo.git
synced 2026-07-29 12:01:31 +00:00
fix(agent-stream): prevent visible scroll animation on initial load
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 <noreply@anthropic.com>
This commit is contained in:
@@ -40,11 +40,14 @@ export function AgentStreamView({
|
||||
const [selectedToolCall, setSelectedToolCall] =
|
||||
useState<SelectedToolCall | null>(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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user