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] =
|
const [selectedToolCall, setSelectedToolCall] =
|
||||||
useState<SelectedToolCall | null>(null);
|
useState<SelectedToolCall | null>(null);
|
||||||
const [isNearBottom, setIsNearBottom] = useState(true);
|
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(() => {
|
useEffect(() => {
|
||||||
if (isNearBottom) {
|
if (isNearBottom) {
|
||||||
scrollViewRef.current?.scrollToEnd({ animated: true });
|
const shouldAnimate = hasScrolledInitially.current;
|
||||||
|
scrollViewRef.current?.scrollToEnd({ animated: shouldAnimate });
|
||||||
|
hasScrolledInitially.current = true;
|
||||||
}
|
}
|
||||||
}, [streamItems, isNearBottom]);
|
}, [streamItems, isNearBottom]);
|
||||||
|
|
||||||
@@ -66,14 +69,6 @@ export function AgentStreamView({
|
|||||||
contentSize.height - contentOffset.y - layoutMeasurement.height;
|
contentSize.height - contentOffset.y - layoutMeasurement.height;
|
||||||
// Consider user "at bottom" if within 10px of the end
|
// Consider user "at bottom" if within 10px of the end
|
||||||
const nearBottom = distanceFromBottom < 10;
|
const nearBottom = distanceFromBottom < 10;
|
||||||
console.log('[AgentStreamView] Scroll:', {
|
|
||||||
contentHeight: contentSize.height,
|
|
||||||
scrollY: contentOffset.y,
|
|
||||||
layoutHeight: layoutMeasurement.height,
|
|
||||||
distanceFromBottom,
|
|
||||||
nearBottom,
|
|
||||||
currentIsNearBottom: isNearBottom
|
|
||||||
});
|
|
||||||
setIsNearBottom(nearBottom);
|
setIsNearBottom(nearBottom);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user