fix attachment pre-decrypting when out of view

ts/components/conversation/ImageGrid.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../types/Attachment';
 
 import { Image } from './Image';
-import { IsMessageVisibleContext } from './ReadableMessage';
+import { IsMessageVisibleContext } from './message/MessageContent';
 
 type Props = {
   attachments: Array<AttachmentTypeWithPath>;

ts/components/conversation/ReadableMessage.tsx

@@ -1,5 +1,5 @@
 import _, { noop } from 'lodash';
-import React, { createContext, useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { InView } from 'react-intersection-observer';
 import { useDispatch, useSelector } from 'react-redux';
 import { getMessageById } from '../../data/data';
@@ -42,14 +42,11 @@ const debouncedTriggerLoadMore = _.debounce(
   100
 );
 
-export const IsMessageVisibleContext = createContext(false);
-
 export const ReadableMessage = (props: ReadableMessageProps) => {
   const { messageId, onContextMenu, className, receivedAt, isUnread } = props;
 
   const isAppFocused = useSelector(getIsAppFocused);
   const dispatch = useDispatch();
-  //         onVisible={haveDoneFirstScrollProp ? onVisible : noop}
 
   const selectedConversationKey = useSelector(getSelectedConversationKey);
   const loadedMessagesLength = useSelector(getLoadedMessagesLength);
@@ -59,8 +56,6 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
   const fetchingMore = useSelector(areMoreMessagesBeingFetched);
   const shouldMarkReadWhenVisible = isUnread;
 
-  const [isMessageVisible, setMessageIsVisible] = useState(false);
-
   const onVisible = useCallback(
     // tslint:disable-next-line: cyclomatic-complexity
     async (inView: boolean | Object) => {
@@ -98,9 +93,6 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
           ((inView as any).type === 'focus' && (inView as any).returnValue === true)) &&
         isAppFocused
       ) {
-        if (isMessageVisible !== true) {
-          setMessageIsVisible(true);
-        }
         if (shouldMarkReadWhenVisible) {
           const found = await getMessageById(messageId);
 
@@ -140,9 +132,7 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
       triggerOnce={false}
       trackVisibility={true}
     >
-      <IsMessageVisibleContext.Provider value={isMessageVisible}>
       {props.children}
-      </IsMessageVisibleContext.Provider>
     </InView>
   );
 };

ts/components/conversation/message/MessageContent.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import moment from 'moment';
-import React, { useCallback, useState } from 'react';
+import React, { createContext, useCallback, useState } from 'react';
+import { InView } from 'react-intersection-observer';
 import { useSelector } from 'react-redux';
 import _ from 'underscore';
 import { MessageRenderingProps, QuoteClickOptions } from '../../../models/messageType';
@@ -89,13 +90,27 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
   }
 }
 
+export const IsMessageVisibleContext = createContext(false);
+
 export const MessageContent = (props: Props) => {
   const contentProps = useSelector(state =>
     getMessageContentSelectorProps(state as any, props.messageId)
   );
+  const [isMessageVisible, setMessageIsVisible] = useState(false);
 
   const [imageBroken, setImageBroken] = useState(false);
 
+  const onVisible = (inView: boolean | Object) => {
+    if (
+      inView === true ||
+      ((inView as any).type === 'focus' && (inView as any).returnValue === true)
+    ) {
+      if (isMessageVisible !== true) {
+        setMessageIsVisible(true);
+      }
+    }
+  };
+
   const handleImageError = useCallback(() => {
     setImageBroken(true);
   }, [setImageBroken]);
@@ -147,6 +162,14 @@ export const MessageContent = (props: Props) => {
       onClick={onClickOnMessageInnerContainer}
       title={toolTipTitle}
     >
+      <InView
+        id={`inview-content-${props.messageId}`}
+        onChange={onVisible}
+        threshold={0}
+        rootMargin="500px 0px 500px 0px"
+        triggerOnce={false}
+      >
+        <IsMessageVisibleContext.Provider value={isMessageVisible}>
           <MessageQuote messageId={props.messageId} onQuoteClick={props.onQuoteClick} />
           <MessageAttachment
             messageId={props.messageId}
@@ -159,6 +182,8 @@ export const MessageContent = (props: Props) => {
               <MessageText messageId={props.messageId} />
             </Flex>
           ) : null}
+        </IsMessageVisibleContext.Provider>
+      </InView>
     </div>
   );
 };