fix: disable smooth scroll on initial chat load

The chat viewer was using smooth scrolling for all followOutput events,
including when first loading the message list. This caused a slow,
animated scroll towards the latest messages on initial load.

Fix by tracking whether initial render is complete and only enabling
smooth scrolling for subsequent followOutput events (new incoming
messages). The ref is reset when switching between conversations.

https://claude.ai/code/session_0174r1Ddh5e2RuhHf2ZrFiNc
This commit is contained in:
Claude
2026-02-02 10:15:12 +00:00
parent 38a6dddedb
commit 6545e2af29

View File

@@ -608,6 +608,11 @@ export function ChatViewer({
};
}, [adapter, conversation]);
// Reset initial scroll flag when conversation changes
useEffect(() => {
isInitialScrollDone.current = false;
}, [conversation?.id]);
// Load messages for this conversation (reactive)
const messages = use$(
() => (conversation ? adapter.loadMessages(conversation) : undefined),
@@ -674,6 +679,9 @@ export function ChatViewer({
// Ref to Virtuoso for programmatic scrolling
const virtuosoRef = useRef<VirtuosoHandle>(null);
// Track if initial scroll has completed (to avoid smooth scroll on first load)
const isInitialScrollDone = useRef(false);
// State for send in progress (prevents double-sends)
const [isSending, setIsSending] = useState(false);
@@ -1076,7 +1084,14 @@ export function ChatViewer({
ref={virtuosoRef}
data={messagesWithMarkers}
initialTopMostItemIndex={messagesWithMarkers.length - 1}
followOutput="smooth"
followOutput={() => {
// Skip smooth scroll on initial load to avoid slow scroll animation
if (!isInitialScrollDone.current) {
isInitialScrollDone.current = true;
return false;
}
return "smooth";
}}
alignToBottom
components={{
Header: () =>