Improve loading previous messages (#68)

packages/react-chat/src/components/Chat.tsx

@@ -32,6 +32,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
     notifications,
     clearNotifications,
     loadNextDay,
+    loadingMessages,
   } = useMessenger(
     activeChannel.name,
     channels.map((channel) => channel.name)
@@ -68,6 +69,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         loadNextDay={() => loadNextDay(activeChannel.name)}
         onCommunityClick={showModal}
         fetchMetadata={fetchMetadata}
+        loadingMessages={loadingMessages}
       />
       {showMembers && !narrow && (
         <Members community={community} setShowChannels={setShowChannels} />

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -35,6 +35,7 @@ interface ChatBodyProps {
   loadNextDay: () => void;
   onCommunityClick: () => void;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
+  loadingMessages: boolean;
 }
 
 export function ChatBody({
@@ -53,6 +54,7 @@ export function ChatBody({
   loadNextDay,
   onCommunityClick,
   fetchMetadata,
+  loadingMessages,
 }: ChatBodyProps) {
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
@@ -112,6 +114,7 @@ export function ChatBody({
                     messages={messages}
                     loadNextDay={loadNextDay}
                     fetchMetadata={fetchMetadata}
+                    loadingMessages={loadingMessages}
                   />
                 ) : (
                   <LoadingSkeleton />

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -15,12 +15,14 @@ type ChatMessagesProps = {
   messages: ChatMessage[];
   loadNextDay: () => void;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
+  loadingMessages: boolean;
 };
 
 export function ChatMessages({
   messages,
   loadNextDay,
   fetchMetadata,
+  loadingMessages,
 }: ChatMessagesProps) {
   const [scrollOnBot, setScrollOnBot] = useState(true);
   const ref = useRef<HTMLHeadingElement>(null);
@@ -31,6 +33,12 @@ export function ChatMessages({
     }
   }, [messages, messages.length, scrollOnBot]);
 
+  useEffect(() => {
+    if ((ref?.current?.clientHeight ?? 0) < (ref?.current?.scrollHeight ?? 0)) {
+      loadNextDay();
+    }
+  }, [messages, messages.length]);
+
   useEffect(() => {
     const setScroll = () => {
       if (ref && ref.current) {
@@ -63,9 +71,11 @@ export function ChatMessages({
         image={image}
       />
       <LinkModal isVisible={!!link} onClose={() => setLink("")} link={link} />
+      {loadingMessages && (
         <LoadingWrapper>
           <LoadingIcon className="message" />
         </LoadingWrapper>
+      )}
       {messages.map((message, idx) => {
         return (
           <MessageOuterWrapper key={message.date.getTime()}>

packages/react-chat/src/hooks/useMessenger.ts

@@ -46,6 +46,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     [chatId: string]: Date;
   }>({});
   const [lastMessage, setLastMessage] = useState(new Date());
+  const [loadingMessages, setLoadingMessages] = useState(false);
 
   useEffect(() => {
     if (lastLoadTime.current?.[chatId]) {
@@ -112,6 +113,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
         if (timeDiff < 30) {
           if (!loadingPreviousMessages.current[id]) {
             loadingPreviousMessages.current[id] = true;
+            setLoadingMessages(true);
             const amountOfMessages = await messenger.retrievePreviousMessages(
               id,
               startTime,
@@ -122,6 +124,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
               setLastMessage(startTime);
             }
             loadingPreviousMessages.current[id] = false;
+            setLoadingMessages(false);
             if (amountOfMessages === 0) {
               loadNextDay(id);
             }
@@ -186,7 +189,6 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
 
   const sendMessage = useCallback(
     async (messageText?: string, image?: Uint8Array) => {
-      // TODO: A message can either contain text or media, not both.
       if (messageText) {
         await messenger?.sendMessage(chatId, {
           text: messageText,
@@ -209,6 +211,10 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     [messages, chatId]
   );
 
+  useEffect(() => {
+    setLoadingMessages(loadingPreviousMessages.current[chatId]);
+  }, [chatId]);
+
   return {
     messenger,
     messages: activeMessages,
@@ -217,5 +223,6 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
     clearNotifications,
     loadNextDay,
     lastMessage,
+    loadingMessages,
   };
 }