From 8c0722f233d17ff8767737811452ebc17f796840 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 21 Jan 2026 15:35:16 +0000
Subject: [PATCH] feat(chat): hide "load older messages" until first batch
 received

Previously the "load older messages" button would appear immediately when opening
a chat, even before the first batch of messages had loaded. This was confusing
as we don't yet know if there are older messages to load.

This change adds state tracking to only show the button after the first batch
of messages has been received, providing better UX and avoiding premature
display of the load button.

Changes:
- Add hasLoadedFirstBatch state to track initial message load
- Show button only after first batch is received
- Reset flag when conversation changes
---
 src/components/ChatViewer.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 3d12ea2..20a5d3e 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -534,6 +534,9 @@ export function ChatViewer({
 
   // Cleanup subscriptions when conversation changes or component unmounts
   useEffect(() => {
+    // Reset first batch flag when conversation changes
+    setHasLoadedFirstBatch(false);
+
     return () => {
       if (conversation) {
         adapter.cleanup(conversation.id);
@@ -547,6 +550,13 @@ export function ChatViewer({
     [adapter, conversation],
   );
 
+  // Track when first batch of messages has loaded
+  useEffect(() => {
+    if (messages && messages.length > 0 && !hasLoadedFirstBatch) {
+      setHasLoadedFirstBatch(true);
+    }
+  }, [messages, hasLoadedFirstBatch]);
+
   // Process messages to include day markers
   const messagesWithMarkers = useMemo(() => {
     if (!messages || messages.length === 0) return [];
@@ -588,6 +598,7 @@ export function ChatViewer({
   // State for loading older messages
   const [isLoadingOlder, setIsLoadingOlder] = useState(false);
   const [hasMore, setHasMore] = useState(true);
+  const [hasLoadedFirstBatch, setHasLoadedFirstBatch] = useState(false);
 
   // Ref to Virtuoso for programmatic scrolling
   const virtuosoRef = useRef<VirtuosoHandle>(null);
@@ -998,6 +1009,7 @@ export function ChatViewer({
             components={{
               Header: () =>
                 hasMore &&
+                hasLoadedFirstBatch &&
                 conversationResult.status === "success" &&
                 protocol !== "nip-10" ? (
                   <div className="flex justify-center py-2">