Message List: Avoid redundant FAB animation

src/components/middle/MessageScroll.tsx

@@ -100,7 +100,7 @@ const MessageScroll: FC<OwnProps> = ({
     if (target.className === 'backwards-trigger') {
       resetScroll(containerRef.current!);
       loadMoreBackwards();
-    } else if (target.className === 'forwards-trigger' && (target as HTMLDivElement).dataset.isActive) {
+    } else if (target.className === 'forwards-trigger') {
       resetScroll(containerRef.current!);
       loadMoreForwards();
     }
@@ -116,10 +116,8 @@ const MessageScroll: FC<OwnProps> = ({
   } = useIntersectionObserver({
     rootRef: containerRef,
     margin: FAB_THRESHOLD,
-  }, ([{ target }]) => {
-    if ((target as HTMLDivElement).dataset.isActive) {
-      updateFabVisibility();
-    }
+  }, () => {
+    updateFabVisibility();
   });
 
   useOnIntersect(fabTriggerRef, observeIntersectionForFab);
@@ -175,13 +173,11 @@ const MessageScroll: FC<OwnProps> = ({
         ref={forwardsTriggerRef}
         key="forwards-trigger"
         className="forwards-trigger"
-        data-is-active={!isViewportNewest}
       />
       <div
         ref={fabTriggerRef}
         key="fab-trigger"
         className="fab-trigger"
-        data-is-active={isViewportNewest}
       />
     </div>
   );

src/components/middle/MiddleColumn.tsx

@@ -100,7 +100,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   const { width: windowWidth } = useWindowSize();
 
   const [dropAreaState, setDropAreaState] = useState(DropAreaState.None);
-  const [isFabShown, setIsFabShown] = useState(false);
+  const [isFabShown, setIsFabShown] = useState<boolean | undefined>();
   const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false);
 
   const hasTools = hasPinnedOrAudioMessage && (
@@ -119,6 +119,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   const renderingMessageListType = usePrevDuringAnimation(messageListType, CLOSE_ANIMATION_DURATION);
   const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION);
   const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION);
+  const renderingIsFabShown = usePrevDuringAnimation(isFabShown, CLOSE_ANIMATION_DURATION);
 
   useEffect(() => {
     return chatId
@@ -130,6 +131,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
 
   useEffect(() => {
     setDropAreaState(DropAreaState.None);
+    setIsFabShown(undefined);
   }, [chatId]);
 
   useEffect(() => {
@@ -282,7 +284,10 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
               )}
             </Transition>
 
-            <ScrollDownButton isShown={isFabShown} />
+            <ScrollDownButton
+              isShown={renderingIsFabShown}
+              canPost={renderingCanPost}
+            />
           </div>
           {IS_MOBILE_SCREEN && <MobileSearch isActive={Boolean(isMobileSearchActive)} />}
         </>

src/components/middle/ScrollDownButton.tsx

@@ -7,7 +7,6 @@ import { GlobalActions, MessageListType } from '../../global/types';
 import { MAIN_THREAD_ID } from '../../api/types';
 
 import { selectChat, selectCurrentMessageList } from '../../modules/selectors';
-import { getCanPostInChat } from '../../modules/helpers';
 import { formatIntegerCompact } from '../../util/textFormat';
 import buildClassName from '../../util/buildClassName';
 import { pick } from '../../util/iteratees';
@@ -19,11 +18,11 @@ import './ScrollDownButton.scss';
 
 type OwnProps = {
   isShown: boolean;
+  canPost?: boolean;
 };
 
 type StateProps = {
   messageListType?: MessageListType;
-  canPost?: boolean;
   unreadCount?: number;
 };
 
@@ -33,8 +32,8 @@ const FOCUS_MARGIN = 20;
 
 const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
   isShown,
-  messageListType,
   canPost,
+  messageListType,
   unreadCount,
   focusLastMessage,
 }) => {
@@ -50,8 +49,8 @@ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
       focusLastMessage();
     } else {
       const messagesContainer = elementRef.current!.parentElement!.querySelector<HTMLDivElement>('.MessageList')!;
-      const messsageElements = messagesContainer.querySelectorAll<HTMLDivElement>('.message-list-item');
-      const lastMessageElement = messsageElements[messsageElements.length - 1];
+      const messageElements = messagesContainer.querySelectorAll<HTMLDivElement>('.message-list-item');
+      const lastMessageElement = messageElements[messageElements.length - 1];
       if (!lastMessageElement) {
         return;
       }
@@ -94,11 +93,9 @@ export default memo(withGlobal<OwnProps>(
 
     const { chatId, threadId, type: messageListType } = currentMessageList;
     const chat = selectChat(global, chatId);
-    const canPost = chat && getCanPostInChat(chat, threadId);
 
     return {
       messageListType,
-      canPost,
       unreadCount: chat && threadId === MAIN_THREAD_ID && messageListType === 'thread' ? chat.unreadCount : undefined,
     };
   },