ChatMessageList: fix initial scroll position

app/soapbox/features/chats/components/chat_message_list.tsx

@@ -6,7 +6,7 @@ import {
 } from 'immutable';
 import escape from 'lodash/escape';
 import throttle from 'lodash/throttle';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { createSelector } from 'reselect';
 
@@ -78,7 +78,10 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds })
 
   const node = useRef<HTMLDivElement>(null);
   const messagesEnd = useRef<HTMLDivElement>(null);
-  const lastComputedScroll = useRef<number>(0);
+  const lastComputedScroll = useRef<number | undefined>(undefined);
+  const scrollBottom = useRef<number | undefined>(undefined);
+
+  const initialCount = useMemo(() => chatMessages.count(), []);
 
   const scrollToBottom = () => {
     messagesEnd.current?.scrollIntoView(false);
@@ -141,37 +144,45 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds })
     };
   }, []);
 
-  // const getScrollBottom = (): number | undefined => {
+  useLayoutEffect(() => {
-  //   if (node.current) {
+    if (node.current) {
-  //     const { scrollHeight, scrollTop } = node.current;
+      const { scrollHeight, scrollTop } = node.current;
-  //     return scrollHeight - scrollTop;
+      scrollBottom.current = scrollHeight - scrollTop;
-  //   }
+    }
-  //
+  });
-  //   return undefined;
-  // };
 
-  // const restoreScrollPosition = (scrollBottom: number) => {
+  const restoreScrollPosition = () => {
-  //   if (node.current) {
+    if (node.current && scrollBottom.current) {
-  //     lastComputedScroll.current = node.current.scrollHeight - scrollBottom;
+      lastComputedScroll.current = node.current.scrollHeight - scrollBottom.current;
-  //     node.current.scrollTop = lastComputedScroll.current;
+      node.current.scrollTop = lastComputedScroll.current;
-  //   }
+    }
-  // };
+  };
 
   // Stick scrollbar to bottom.
   useEffect(() => {
-    if (isNearBottom() || initialLoad) {
+    if (isNearBottom()) {
+      scrollToBottom();
+    }
+
+    // First load.
+    if (chatMessages.count() !== initialCount) {
+      setInitialLoad(false);
+      setIsLoading(false);
       scrollToBottom();
     }
   }, [chatMessages.count()]);
 
+  useEffect(() => {
+    scrollToBottom();
+  }, [messagesEnd.current]);
+
   // History added.
   useEffect(() => {
-    // Retain scroll bar position when loading old messages
+    // Retain scroll bar position when loading old messages.
-    // restoreScrollPosition(scrollBottom);
+    if (!initialLoad) {
-
+      restoreScrollPosition();
-    setIsLoading(false);
+    }
-    setInitialLoad(false);
+  }, [chatMessageIds.first()]);
-  }, [chatMessages.getIn([0, 'id'])]);
 
   const handleLoadMore = () => {
     const maxId = chatMessages.getIn([0, 'id']) as string;