From 2a292f8134ff42513412ae27e17a46856861c3d6 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 9 Feb 2024 16:13:16 +1100
Subject: [PATCH] fix: dont use app focus all the time

---
 .../message/message-content/MessageContent.tsx           | 9 +++------
 .../message/message-item/ReadableMessage.tsx             | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
index b9cb3933b..98b509a8a 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/ts/components/conversation/message/message-content/MessageContent.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { isEmpty, noop } from 'lodash';
+import { isEmpty } from 'lodash';
 import moment from 'moment';
 import React, { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
 import { InView } from 'react-intersection-observer';
@@ -17,7 +17,6 @@ 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';
@@ -84,8 +83,6 @@ 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) =>
@@ -101,7 +98,7 @@ export const MessageContent = (props: Props) => {
   const [imageBroken, setImageBroken] = useState(false);
 
   const onVisible = (inView: boolean, _: IntersectionObserverEntry) => {
-    if (isAppFocused && inView) {
+    if (inView) {
       if (isMessageVisible !== true) {
         setMessageIsVisible(true);
       }
@@ -185,7 +182,7 @@ export const MessageContent = (props: Props) => {
       <InView
         id={`inview-content-${props.messageId}`}
         as={'div'}
-        onChange={isAppFocused ? onVisible : noop}
+        onChange={onVisible}
         threshold={0}
         rootMargin="500px 0px 500px 0px"
         triggerOnce={false}
diff --git a/ts/components/conversation/message/message-item/ReadableMessage.tsx b/ts/components/conversation/message/message-item/ReadableMessage.tsx
index 2a182ce1e..619563732 100644
--- a/ts/components/conversation/message/message-item/ReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/ReadableMessage.tsx
@@ -144,7 +144,7 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
       }
 
       // this part is just handling the marking of the message as read if needed
-      if (inView && isAppFocused) {
+      if (inView) {
         if (isUnread) {
           // TODOLATER this is pretty expensive and should instead use values from the redux store
           const found = await Data.getMessageById(messageId);