Optimize initial chat scroll to avoid slow animation on load (#238)

* 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

* fix: use instant scroll instead of disabling scroll on initial load

The previous fix returned `false` which disabled scrolling entirely,
causing incorrect scroll position. Changed to return "auto" which
scrolls instantly (no animation) while still positioning correctly.

https://claude.ai/code/session_0174r1Ddh5e2RuhHf2ZrFiNc

* fix: buffer NIP-29 messages until EOSE to prevent partial renders

The loadMessages observable was emitting on every event as they streamed
in before EOSE, causing multiple re-renders with partial message lists.
This resulted in incorrect scroll positions during initial chat load.

Now uses combineLatest with a BehaviorSubject to track EOSE state and
only emits the message list after the initial batch is fully loaded.
New messages after EOSE continue to trigger immediate updates.

https://claude.ai/code/session_0174r1Ddh5e2RuhHf2ZrFiNc

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alejandro
2026-02-02 11:42:13 +01:00
committed by GitHub
parent 38a6dddedb
commit 4be8c6e819
2 changed files with 31 additions and 6 deletions

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={() => {
// Use instant scroll on initial load to avoid slow scroll animation
if (!isInitialScrollDone.current) {
isInitialScrollDone.current = true;
return "auto"; // Instant scroll (no animation)
}
return "smooth";
}}
alignToBottom
components={{
Header: () =>