fix: make sure inview is only triggered when the app is in focus

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { isEmpty } from 'lodash';
+import { isEmpty, noop } from 'lodash';
 import moment from 'moment';
 import React, { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
 import { InView } from 'react-intersection-observer';
@@ -17,6 +17,7 @@ import {
   getQuotedMessageToAnimate,
   getShouldHighlightMessage,
 } from '../../../../state/selectors/conversations';
+import { getIsAppFocused } from '../../../../state/selectors/section';
 import { useSelectedIsPrivate } from '../../../../state/selectors/selectedConversation';
 import { canDisplayImage } from '../../../../types/Attachment';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
@@ -83,6 +84,8 @@ const StyledAvatarContainer = styled.div`
 `;
 
 export const MessageContent = (props: Props) => {
+  const isAppFocused = useSelector(getIsAppFocused);
+
   const [highlight, setHighlight] = useState(false);
   const [didScroll, setDidScroll] = useState(false);
   const contentProps = useSelector((state: StateType) =>
@@ -98,7 +101,10 @@ export const MessageContent = (props: Props) => {
   const [imageBroken, setImageBroken] = useState(false);
 
   const onVisible = (inView: boolean, _: IntersectionObserverEntry) => {
-    if (inView) {
+    window.log.debug(
+      `WIP: [ses-1409] MessageContent inView ${inView} isAppFocused ${isAppFocused} messageId ${props.messageId}`
+    );
+    if (isAppFocused && inView) {
       if (isMessageVisible !== true) {
         setMessageIsVisible(true);
       }
@@ -182,7 +188,7 @@ export const MessageContent = (props: Props) => {
       <InView
         id={`inview-content-${props.messageId}`}
         as={'div'}
-        onChange={onVisible}
+        onChange={isAppFocused ? onVisible : noop}
         threshold={0}
         rootMargin="500px 0px 500px 0px"
         triggerOnce={false}

ts/components/conversation/message/message-item/ReadableMessage.tsx

@@ -116,10 +116,13 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
   });
 
   const onVisible = useCallback(
-    async (inView: boolean | object) => {
+    async (inView: boolean, _: IntersectionObserverEntry) => {
       if (!selectedConversationKey) {
         return;
       }
+      window.log.debug(
+        `WIP: [ses-1409] ReadableMessage inView ${inView} isAppFocused ${isAppFocused} messageId ${messageId}`
+      );
       // we are the most recent message
       if (mostRecentMessageId === messageId) {
         // make sure the app is focused, because we mark message as read here
@@ -135,30 +138,16 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
         }
       }
 
-      if (
-        inView === true &&
-        isAppFocused &&
-        oldestMessageId === messageId &&
-        !fetchingMoreInProgress
-      ) {
+      if (inView && isAppFocused && oldestMessageId === messageId && !fetchingMoreInProgress) {
         debouncedTriggerLoadMoreTop(selectedConversationKey, oldestMessageId);
       }
 
-      if (
-        inView === true &&
-        isAppFocused &&
-        youngestMessageId === messageId &&
-        !fetchingMoreInProgress
-      ) {
+      if (inView && isAppFocused && youngestMessageId === messageId && !fetchingMoreInProgress) {
         debouncedTriggerLoadMoreBottom(selectedConversationKey, youngestMessageId);
       }
 
       // this part is just handling the marking of the message as read if needed
-      if (
-        (inView === true ||
-          ((inView as any).type === 'focus' && (inView as any).returnValue === true)) &&
-        isAppFocused
-      ) {
+      if (inView && isAppFocused) {
         if (isUnread) {
           // TODOLATER this is pretty expensive and should instead use values from the redux store
           const found = await Data.getMessageById(messageId);