Merge pull request #3170 from yougotwill/fix/ses-2546/attachment_preview_loading

Fix attachment previews

stylesheets/_modules.scss

@@ -137,6 +137,7 @@
   line-height: 16px;
   letter-spacing: 0.3px;
   margin-top: 3px;
+  text-align: start;
   white-space: nowrap;
 }
 

ts/components/conversation/Image.tsx

@@ -1,17 +1,26 @@
 import classNames from 'classnames';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { isNumber } from 'lodash';
 import { useDisableDrag } from '../../hooks/useDisableDrag';
-import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
 import { Spinner } from '../loading';
+import { MessageGenericAttachment } from './message/message-content/MessageGenericAttachment';
+import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
+import { useMessageIdFromContext } from '../../contexts/MessageIdContext';
+import {
+  useMessageDirection,
+  useMessageSelected,
+  useMessageTimestamp,
+} from '../../state/selectors';
 
 type Props = {
   alt: string;
   attachment: AttachmentTypeWithPath | AttachmentType;
-  url: string | undefined; // url is undefined if the message is not visible yet
+  /** undefined if the message is not visible yet, '' if the attachment is broken */
+  url: string | undefined;
+  imageBroken?: boolean;
 
   height?: number | string;
   width?: number | string;
@@ -24,8 +33,8 @@ type Props = {
   playIconOverlay?: boolean;
   softCorners: boolean;
   forceSquare?: boolean;
-  dropShadow?: boolean;
   attachmentIndex?: number;
+  highlight?: boolean;
 
   onClick?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
   onClickClose?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
@@ -46,6 +55,7 @@ export const Image = (props: Props) => {
   const {
     alt,
     attachment,
+    imageBroken,
     closeButton,
     darkOverlay,
     height: _height,
@@ -56,34 +66,74 @@ export const Image = (props: Props) => {
     playIconOverlay,
     softCorners,
     forceSquare,
-    dropShadow,
     attachmentIndex,
+    highlight,
     url,
     width: _width,
   } = props;
 
-  const onErrorUrlFilterering = useCallback(() => {
+  const messageId = useMessageIdFromContext();
-    if (url && onError) {
+  const dropShadow = useMessageSelected(messageId);
-      onError();
+  const direction = useMessageDirection(messageId);
-    }
+  /** used for debugging */
-  }, [url, onError]);
+  const timestamp = useMessageTimestamp(messageId);
+
   const disableDrag = useDisableDrag();
+  const { loading, urlToLoad } = useEncryptedFileFetch(
+    url,
+    attachment.contentType,
+    false,
+    timestamp
+  );
 
   const { caption } = attachment || { caption: null };
-  let { pending } = attachment || { pending: true };
+  const [pending, setPending] = useState<boolean>(attachment.pending || true);
-  if (!url) {
+  const [mounted, setMounted] = useState<boolean>(
-    // force pending to true if the url is undefined, so we show a loader while decrypting the attachemtn
+    (!loading || !pending) && urlToLoad === undefined
-    pending = true;
+  );
-  }
+
   const canClick = onClick && !pending;
   const role = canClick ? 'button' : undefined;
-  const { loading, urlToLoad } = useEncryptedFileFetch(url || '', attachment.contentType, false);
+
-  // data will be url if loading is finished and '' if not
+  const onErrorUrlFilterering = useCallback(() => {
-  const srcData = !loading ? urlToLoad : '';
+    if (mounted && url && urlToLoad === '' && onError) {
+      onError();
+      setPending(false);
+    }
+  }, [mounted, onError, url, urlToLoad]);
 
   const width = isNumber(_width) ? `${_width}px` : _width;
   const height = isNumber(_height) ? `${_height}px` : _height;
 
+  useEffect(() => {
+    if (mounted && url === '') {
+      setPending(false);
+      onErrorUrlFilterering();
+    }
+
+    if (mounted && imageBroken && urlToLoad === '') {
+      setPending(false);
+      onErrorUrlFilterering();
+    }
+
+    if (url) {
+      setPending(false);
+      setMounted(!loading && !pending);
+    }
+  }, [imageBroken, loading, mounted, onErrorUrlFilterering, pending, url, urlToLoad]);
+
+  if (mounted && imageBroken) {
+    return (
+      <MessageGenericAttachment
+        attachment={attachment as AttachmentTypeWithPath}
+        pending={false}
+        highlight={!!highlight}
+        selected={!!dropShadow} // dropshadow is selected
+        direction={direction}
+      />
+    );
+  }
+
   return (
     <div
       role={role}
@@ -107,7 +157,7 @@ export const Image = (props: Props) => {
       }}
       data-attachmentindex={attachmentIndex}
     >
-      {pending || loading ? (
+      {!mounted ? (
         <div
           className="module-image__loading-placeholder"
           style={{
@@ -137,7 +187,7 @@ export const Image = (props: Props) => {
             width: forceSquare ? width : '',
             height: forceSquare ? height : '',
           }}
-          src={srcData}
+          src={urlToLoad}
           onDragStart={disableDrag}
         />
       )}
@@ -166,7 +216,7 @@ export const Image = (props: Props) => {
           className="module-image__close-button"
         />
       ) : null}
-      {!(pending || loading) && playIconOverlay ? (
+      {mounted && playIconOverlay ? (
         <div className="module-image__play-overlay__circle">
           <div className="module-image__play-overlay__icon" />
         </div>

ts/components/conversation/ImageGrid.tsx

@@ -10,15 +10,15 @@ import {
 } from '../../types/Attachment';
 
 import { useIsMessageVisible } from '../../contexts/isMessageVisibleContext';
-import { useMessageSelected } from '../../state/selectors';
 import { THUMBNAIL_SIDE } from '../../types/attachments/VisualAttachment';
 import { Image } from './Image';
 
 type Props = {
   attachments: Array<AttachmentTypeWithPath>;
   onError: () => void;
+  imageBroken: boolean;
+  highlight: boolean;
   onClickAttachment?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
-  messageId?: string;
 };
 
 const StyledImageGrid = styled.div<{ flexDirection: 'row' | 'column' }>`
@@ -33,17 +33,17 @@ const Row = (
     renderedSize: number;
     startIndex: number;
     totalAttachmentsCount: number;
-    selected: boolean;
   }
 ) => {
   const {
     attachments,
+    imageBroken,
+    highlight,
     onError,
     renderedSize,
     startIndex,
     onClickAttachment,
     totalAttachmentsCount,
-    selected,
   } = props;
   const isMessageVisible = useIsMessageVisible();
   const moreMessagesOverlay = totalAttachmentsCount > 3;
@@ -64,11 +64,12 @@ const Row = (
             url={isMessageVisible ? getThumbnailUrl(attachment) : undefined}
             attachmentIndex={startIndex + index}
             onClick={onClickAttachment}
+            imageBroken={imageBroken}
+            highlight={highlight}
             onError={onError}
             softCorners={true}
             darkOverlay={showOverlay}
             overlayText={showOverlay ? moreMessagesOverlayText : undefined}
-            dropShadow={selected}
           />
         );
       })}
@@ -77,9 +78,7 @@ const Row = (
 };
 
 export const ImageGrid = (props: Props) => {
-  const { attachments, onError, onClickAttachment, messageId } = props;
+  const { attachments, imageBroken, highlight, onError, onClickAttachment } = props;
-
-  const selected = useMessageSelected(messageId);
 
   if (!attachments || !attachments.length) {
     return null;
@@ -90,12 +89,13 @@ export const ImageGrid = (props: Props) => {
       <StyledImageGrid flexDirection={'row'}>
         <Row
           attachments={attachments.slice(0, 1)}
+          imageBroken={imageBroken}
+          highlight={highlight}
           onError={onError}
           onClickAttachment={onClickAttachment}
           renderedSize={THUMBNAIL_SIDE}
           startIndex={0}
           totalAttachmentsCount={attachments.length}
-          selected={selected}
         />
       </StyledImageGrid>
     );
@@ -107,12 +107,13 @@ export const ImageGrid = (props: Props) => {
       <StyledImageGrid flexDirection={'row'}>
         <Row
           attachments={attachments.slice(0, 2)}
+          imageBroken={imageBroken}
+          highlight={highlight}
           onError={onError}
           onClickAttachment={onClickAttachment}
           renderedSize={THUMBNAIL_SIDE}
           startIndex={0}
           totalAttachmentsCount={attachments.length}
-          selected={selected}
         />
       </StyledImageGrid>
     );
@@ -125,23 +126,25 @@ export const ImageGrid = (props: Props) => {
     <StyledImageGrid flexDirection={'row'}>
       <Row
         attachments={attachments.slice(0, 1)}
+        imageBroken={imageBroken}
+        highlight={highlight}
         onError={onError}
         onClickAttachment={onClickAttachment}
         renderedSize={THUMBNAIL_SIDE}
         startIndex={0}
         totalAttachmentsCount={attachments.length}
-        selected={selected}
       />
 
       <StyledImageGrid flexDirection={'column'}>
         <Row
           attachments={attachments.slice(1, 3)}
+          imageBroken={imageBroken}
+          highlight={highlight}
           onError={onError}
           onClickAttachment={onClickAttachment}
           renderedSize={columnImageSide}
           startIndex={1}
           totalAttachmentsCount={attachments.length}
-          selected={selected}
         />
       </StyledImageGrid>
     </StyledImageGrid>

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

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { clone } from 'lodash';
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -16,21 +15,19 @@ import {
 import {
   AttachmentType,
   AttachmentTypeWithPath,
-  canDisplayImagePreview,
-  getExtensionForDisplay,
-  hasImage,
-  hasVideoScreenshot,
   isAudio,
   isImage,
   isVideo,
 } from '../../../../types/Attachment';
 import { saveAttachmentToDisk } from '../../../../util/attachmentsUtil';
 import { MediaItemType } from '../../../lightbox/LightboxGallery';
-import { Spinner } from '../../../loading';
 import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
 import { ImageGrid } from '../../ImageGrid';
 import { ClickToTrustSender } from './ClickToTrustSender';
 import { MessageHighlighter } from './MessageHighlighter';
+import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
+import { MessageGenericAttachment } from './MessageGenericAttachment';
+import { ContextMessageProvider } from '../../../../contexts/MessageIdContext';
 
 export type MessageAttachmentSelectorProps = Pick<
   MessageRenderingProps,
@@ -61,12 +58,9 @@ const StyledImageGridContainer = styled.div<{
   justify-content: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
 `;
 
-const StyledGenericAttachmentContainer = styled(MessageHighlighter)<{ selected: boolean }>`
-  ${props => props.selected && 'box-shadow: var(--drop-shadow);'}
-`;
-
 export const MessageAttachment = (props: Props) => {
   const { messageId, imageBroken, handleImageError, highlight = false } = props;
+  const isDetailView = useIsDetailMessageView();
 
   const dispatch = useDispatch();
   const attachmentProps = useSelector((state: StateType) =>
@@ -128,29 +122,31 @@ export const MessageAttachment = (props: Props) => {
   }
 
   const firstAttachment = attachments[0];
-  const displayImage = canDisplayImagePreview(attachments);
 
   if (!isTrustedForAttachmentDownload) {
     return <ClickToTrustSender messageId={messageId} />;
   }
 
-  if (
+  if (isImage(attachments) || isVideo(attachments)) {
-    displayImage &&
+    // we use the carousel in the detail view
-    !imageBroken &&
+    if (isDetailView) {
-    ((isImage(attachments) && hasImage(attachments)) ||
+      return null;
-      (isVideo(attachments) && hasVideoScreenshot(attachments)))
+    }
-  ) {
+
     return (
-      <MessageHighlighter highlight={highlight}>
+      <ContextMessageProvider value={messageId}>
-        <StyledImageGridContainer messageDirection={direction}>
+        <MessageHighlighter highlight={highlight}>
-          <ImageGrid
+          <StyledImageGridContainer messageDirection={direction}>
-            messageId={messageId}
+            <ImageGrid
-            attachments={attachments}
+              attachments={attachments}
-            onError={handleImageError}
+              imageBroken={imageBroken}
-            onClickAttachment={onClickOnImageGrid}
+              highlight={highlight}
-          />
+              onError={handleImageError}
-        </StyledImageGridContainer>
+              onClickAttachment={onClickOnImageGrid}
-      </MessageHighlighter>
+            />
+          </StyledImageGridContainer>
+        </MessageHighlighter>
+      </ContextMessageProvider>
     );
   }
 
@@ -175,48 +171,16 @@ export const MessageAttachment = (props: Props) => {
       </MessageHighlighter>
     );
   }
-  const { pending, fileName, fileSize, contentType } = firstAttachment;
-  const extension = getExtensionForDisplay({ contentType, fileName });
 
   return (
-    <StyledGenericAttachmentContainer
+    <MessageGenericAttachment
+      attachment={firstAttachment}
+      pending={firstAttachment.pending}
+      direction={direction}
       highlight={highlight}
       selected={selected}
-      className={'module-message__generic-attachment'}
       onClick={onClickOnGenericAttachment}
-    >
+    />
-      {pending ? (
-        <div className="module-message__generic-attachment__spinner-container">
-          <Spinner size="small" />
-        </div>
-      ) : (
-        <div className="module-message__generic-attachment__icon-container">
-          <div role="button" className="module-message__generic-attachment__icon">
-            {extension ? (
-              <div className="module-message__generic-attachment__icon__extension">{extension}</div>
-            ) : null}
-          </div>
-        </div>
-      )}
-      <div className="module-message__generic-attachment__text">
-        <div
-          className={classNames(
-            'module-message__generic-attachment__file-name',
-            `module-message__generic-attachment__file-name--${direction}`
-          )}
-        >
-          {fileName}
-        </div>
-        <div
-          className={classNames(
-            'module-message__generic-attachment__file-size',
-            `module-message__generic-attachment__file-size--${direction}`
-          )}
-        >
-          {fileSize}
-        </div>
-      </div>
-    </StyledGenericAttachmentContainer>
   );
 };
 

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

@@ -21,7 +21,6 @@ import {
   getShouldHighlightMessage,
 } from '../../../../state/selectors/conversations';
 import { useSelectedIsPrivate } from '../../../../state/selectors/selectedConversation';
-import { canDisplayImagePreview } from '../../../../types/Attachment';
 import { MessageAttachment } from './MessageAttachment';
 import { MessageAvatar } from './MessageAvatar';
 import { MessageHighlighter } from './MessageHighlighter';
@@ -147,16 +146,12 @@ export const MessageContent = (props: Props) => {
     return null;
   }
 
-  const { direction, text, timestamp, serverTimestamp, previews, quote, attachments } =
+  const { direction, text, timestamp, serverTimestamp, previews, quote } = contentProps;
-    contentProps;
 
   const hasContentBeforeAttachment = !isEmpty(previews) || !isEmpty(quote) || !isEmpty(text);
 
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
 
-  const isDetailViewAndSupportsAttachmentCarousel =
-    isDetailView && canDisplayImagePreview(attachments);
-
   return (
     <StyledMessageContent
       className={classNames('module-message__container', `module-message__container--${direction}`)}
@@ -204,14 +199,14 @@ export const MessageContent = (props: Props) => {
               <MessageText messageId={props.messageId} />
             </StyledMessageOpaqueContent>
           )}
-          {!isDeleted && isDetailViewAndSupportsAttachmentCarousel && !imageBroken ? null : (
+          {!isDeleted ? (
             <MessageAttachment
               messageId={props.messageId}
               imageBroken={imageBroken}
               handleImageError={handleImageError}
               highlight={highlight}
             />
-          )}
+          ) : null}
         </IsMessageVisibleContext.Provider>
       </InView>
     </StyledMessageContent>

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

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { PropsForAttachment } from '../../../../state/ducks/conversations';
+import { AttachmentTypeWithPath, getExtensionForDisplay } from '../../../../types/Attachment';
+import { Spinner } from '../../../loading';
+import { MessageModelType } from '../../../../models/messageType';
+import { MessageHighlighter } from './MessageHighlighter';
+
+const StyledGenericAttachmentContainer = styled(MessageHighlighter)<{
+  highlight: boolean;
+  selected: boolean;
+}>`
+  ${props => props.selected && 'box-shadow: var(--drop-shadow);'}
+`;
+
+export function MessageGenericAttachment({
+  attachment,
+  /** comes from the attachment iself or the component if it needs to be decrypted */
+  pending,
+  selected,
+  highlight,
+  direction,
+  onClick,
+}: {
+  attachment: PropsForAttachment | AttachmentTypeWithPath;
+  pending: boolean;
+  selected: boolean;
+  highlight: boolean;
+  direction?: MessageModelType;
+  onClick?: (e: any) => void;
+}) {
+  const { fileName, fileSize, contentType } = attachment;
+  const extension = getExtensionForDisplay({ contentType, fileName });
+
+  return (
+    <StyledGenericAttachmentContainer
+      highlight={highlight}
+      selected={selected}
+      className={'module-message__generic-attachment'}
+      onClick={onClick}
+    >
+      {pending ? (
+        <div className="module-message__generic-attachment__spinner-container">
+          <Spinner size="small" />
+        </div>
+      ) : (
+        <div className="module-message__generic-attachment__icon-container">
+          <div role="button" className="module-message__generic-attachment__icon">
+            {extension ? (
+              <div className="module-message__generic-attachment__icon__extension">{extension}</div>
+            ) : null}
+          </div>
+        </div>
+      )}
+      <div className="module-message__generic-attachment__text">
+        <div
+          className={classNames(
+            'module-message__generic-attachment__file-name',
+            `module-message__generic-attachment__file-name--${direction}`
+          )}
+        >
+          {fileName}
+        </div>
+        <div
+          className={classNames(
+            'module-message__generic-attachment__file-size',
+            `module-message__generic-attachment__file-size--${direction}`
+          )}
+        >
+          {fileSize}
+        </div>
+      </div>
+    </StyledGenericAttachmentContainer>
+  );
+}

ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx

@@ -85,6 +85,8 @@ const DebugMessageInfo = ({ messageId }: { messageId: string }) => {
   const expirationType = useMessageExpirationType(messageId);
   const expirationDurationMs = useMessageExpirationDurationMs(messageId);
   const expirationTimestamp = useMessageExpirationTimestamp(messageId);
+  const timestamp = useMessageTimestamp(messageId);
+  const serverTimestamp = useMessageServerTimestamp(messageId);
 
   if (!isDevProd()) {
     return null;
@@ -92,29 +94,25 @@ const DebugMessageInfo = ({ messageId }: { messageId: string }) => {
 
   return (
     <>
-      {convoId ? (
+      {convoId ? <LabelWithInfo label={`Conversation ID:`} info={convoId} /> : null}
-        <LabelWithInfo label={`${window.i18n('conversationId')}:`} info={convoId} />
+      {messageHash ? <LabelWithInfo label={`Message Hash:`} info={messageHash} /> : null}
-      ) : null}
+      {serverId ? <LabelWithInfo label={`Server ID:`} info={`${serverId}`} /> : null}
-      {messageHash ? (
+      {timestamp ? <LabelWithInfo label={`Timestamp:`} info={String(timestamp)} /> : null}
-        <LabelWithInfo label={`${window.i18n('messageHash')}:`} info={messageHash} />
+      {serverTimestamp ? (
-      ) : null}
+        <LabelWithInfo label={`Server Timestamp:`} info={String(serverTimestamp)} />
-      {serverId ? (
-        <LabelWithInfo label={`${window.i18n('serverId')}:`} info={`${serverId}`} />
-      ) : null}
-      {expirationType ? (
-        <LabelWithInfo label={`${window.i18n('expirationType')}:`} info={expirationType} />
       ) : null}
+      {expirationType ? <LabelWithInfo label={`Expiration Type:`} info={expirationType} /> : null}
       {expirationDurationMs ? (
         <LabelWithInfo
-          label={`${window.i18n('expirationDuration')}:`}
+          label={`Expiration Duration:`}
-          // formatDistanceStrict (date-fns) is not localized yet
+          // TODO formatDistanceStrict (date-fns) is not localized yet
           info={`${formatDistanceStrict(0, Math.floor(expirationDurationMs / 1000))}`}
         />
       ) : null}
       {expirationTimestamp ? (
         <LabelWithInfo
-          label={`${window.i18n('disappears')}:`}
+          label={`Disappears:`}
-          // format (date-fns) is not localized yet
+          // TODO format (date-fns) is not localized yet
           info={`${format(expirationTimestamp, 'PPpp')}`}
         />
       ) : null}

ts/contexts/MessageIdContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * This React context is used to share deep into a node tree the message ID we are currently rendering.
+ * This is to avoid passing the prop to all the subtree component
+ */
+const ContextMessageId = createContext<string | undefined>(undefined);
+
+export const ContextMessageProvider = ContextMessageId.Provider;
+
+export function useMessageIdFromContext() {
+  const messageId = useContext(ContextMessageId);
+  return messageId;
+}

ts/hooks/useEncryptedFileFetch.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import {
   getAlreadyDecryptedMediaUrl,
@@ -6,40 +6,51 @@ import {
 } from '../session/crypto/DecryptedAttachmentsManager';
 import { perfEnd, perfStart } from '../session/utils/Performance';
 
-export const useEncryptedFileFetch = (url: string, contentType: string, isAvatar: boolean) => {
+export const useEncryptedFileFetch = (
-  const [urlToLoad, setUrlToLoad] = useState('');
+  /** undefined if the message is not visible yet, url is '' if something is broken */
-  const [loading, setLoading] = useState(false);
+  url: string | undefined,
-
+  contentType: string,
-  const mountedRef = useRef(true);
+  isAvatar: boolean,
-
+  timestamp?: number
-  const alreadyDecrypted = getAlreadyDecryptedMediaUrl(url);
+) => {
+  /** undefined if the attachment is not decrypted yet, '' if the attachment fails to decrypt */
+  const [urlToLoad, setUrlToLoad] = useState<string | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+
+  const alreadyDecrypted = url ? getAlreadyDecryptedMediaUrl(url) : '';
+
+  const fetchUrl = useCallback(
+    async (mediaUrl: string | undefined) => {
+      if (alreadyDecrypted || !mediaUrl) {
+        if (alreadyDecrypted) {
+          setUrlToLoad(alreadyDecrypted);
+          setLoading(false);
+        }
+        return;
+      }
 
-  useEffect(() => {
+      setLoading(true);
-    async function fetchUrl() {
-      perfStart(`getDecryptedMediaUrl-${url}`);
-      const decryptedUrl = await getDecryptedMediaUrl(url, contentType, isAvatar);
-      perfEnd(`getDecryptedMediaUrl-${url}`, `getDecryptedMediaUrl-${url}`);
 
-      if (mountedRef.current) {
+      try {
+        perfStart(`getDecryptedMediaUrl-${mediaUrl}-${timestamp}`);
+        const decryptedUrl = await getDecryptedMediaUrl(mediaUrl, contentType, isAvatar);
+        perfEnd(
+          `getDecryptedMediaUrl-${mediaUrl}-${timestamp}`,
+          `getDecryptedMediaUrl-${mediaUrl}-${timestamp}`
+        );
         setUrlToLoad(decryptedUrl);
+      } catch (error) {
+        setUrlToLoad('');
+      } finally {
         setLoading(false);
       }
-    }
+    },
-    if (alreadyDecrypted) {
+    [alreadyDecrypted, contentType, isAvatar, timestamp]
-      return;
+  );
-    }
+
-    setLoading(true);
+  useEffect(() => {
-    mountedRef.current = true;
+    void fetchUrl(url);
-    void fetchUrl();
+  }, [fetchUrl, url]);
-
+
-    // eslint-disable-next-line consistent-return
-    return () => {
-      mountedRef.current = false;
-    };
-  }, [url, alreadyDecrypted, contentType, isAvatar]);
-
-  if (alreadyDecrypted) {
-    return { urlToLoad: alreadyDecrypted, loading: false };
-  }
   return { urlToLoad, loading };
 };

ts/session/crypto/DecryptedAttachmentsManager.ts

@@ -10,7 +10,6 @@
  *
  */
 import path from 'path';
-import { reject } from 'lodash';
 
 import * as fse from 'fs-extra';
 
@@ -114,7 +113,7 @@ export const getDecryptedMediaUrl = async (
 
     urlToDecryptingPromise.set(
       url,
-      new Promise(async resolve => {
+      new Promise(async (resolve, reject) => {
         // window.log.debug('about to read and decrypt file :', url, path.isAbsolute(url));
         try {
           const absUrl = path.isAbsolute(url) ? url : getAbsoluteAttachmentPath(url);
@@ -149,7 +148,6 @@ export const getDecryptedMediaUrl = async (
         }
       })
     );
-
     return urlToDecryptingPromise.get(url) as Promise<string>;
   }
   // Not sure what we got here. Just return the file.

ts/state/ducks/conversations.ts

@@ -25,6 +25,7 @@ import {
   PropsForCallNotification,
   PropsForInteractionNotification,
 } from './types';
+import { AttachmentType } from '../../types/Attachment';
 
 export type MessageModelPropsWithoutConvoProps = {
   propsForMessage: PropsForMessageWithoutConvoProps;
@@ -128,35 +129,13 @@ export type PropsForGroupInvitation = {
   messageId: string;
 };
 
-export type PropsForAttachment = {
+export type PropsForAttachment = AttachmentType & {
   id: number;
-  contentType: string;
+  isVoiceMessage: boolean;
-  caption?: string;
   size: number;
-  width?: number;
-  height?: number;
-  duration?: string;
-  url: string;
   path: string;
-  fileSize: string | null;
-  isVoiceMessage: boolean;
   pending: boolean;
-  fileName: string;
+  error?: number; // if the download somehow failed, this will be set to true and be 0 or 1 in the db
-  error?: number; // if the download somhehow failed, this will be set to true and be 0-1 once saved in the db
-  screenshot: {
-    contentType: string;
-    width: number;
-    height: number;
-    url?: string;
-    path?: string;
-  } | null;
-  thumbnail: {
-    contentType: string;
-    width: number;
-    height: number;
-    url?: string;
-    path?: string;
-  } | null;
 };
 
 export type PropsForQuote = {

ts/types/Attachment.ts

@@ -13,35 +13,40 @@ const MAX_HEIGHT = THUMBNAIL_SIDE;
 const MIN_WIDTH = THUMBNAIL_SIDE;
 const MIN_HEIGHT = THUMBNAIL_SIDE;
 
-// Used for display
+// Used for displaying attachments in the UI
+export type AttachmentScreenshot = {
+  contentType: MIME.MIMEType;
+  height: number;
+  width: number;
+  url?: string;
+  path?: string;
+};
+
+export type AttachmentThumbnail = {
+  contentType: MIME.MIMEType;
+  height: number;
+  width: number;
+  url?: string;
+  path?: string;
+};
 
 export interface AttachmentType {
-  caption?: string;
   contentType: MIME.MIMEType;
   fileName: string;
-  /** Not included in protobuf, needs to be pulled from flags */
-  isVoiceMessage?: boolean;
   /** For messages not already on disk, this will be a data url */
   url: string;
-  videoUrl?: string;
-  size?: number;
   fileSize: string | null;
   pending?: boolean;
+  screenshot: AttachmentScreenshot | null;
+  thumbnail: AttachmentThumbnail | null;
+  caption?: string;
+  size?: number;
   width?: number;
   height?: number;
   duration?: string;
-  screenshot: {
+  videoUrl?: string;
-    height: number;
+  /** Not included in protobuf, needs to be pulled from flags */
-    width: number;
+  isVoiceMessage?: boolean;
-    url?: string;
-    contentType: MIME.MIMEType;
-  } | null;
-  thumbnail: {
-    height: number;
-    width: number;
-    url?: string;
-    contentType: MIME.MIMEType;
-  } | null;
 }
 
 export interface AttachmentTypeWithPath extends AttachmentType {
@@ -49,21 +54,6 @@ export interface AttachmentTypeWithPath extends AttachmentType {
   id: number;
   flags?: number;
   error?: any;
-
-  screenshot: {
-    height: number;
-    width: number;
-    url?: string;
-    contentType: MIME.MIMEType;
-    path?: string;
-  } | null;
-  thumbnail: {
-    height: number;
-    width: number;
-    url?: string;
-    contentType: MIME.MIMEType;
-    path?: string;
-  } | null;
 }
 
 // UI-focused functions
@@ -166,7 +156,7 @@ export function isVideoAttachment(attachment?: AttachmentType): boolean {
 
 export function hasVideoScreenshot(attachments?: Array<AttachmentType>): boolean {
   const firstAttachment = attachments ? attachments[0] : null;
-  return Boolean(firstAttachment?.screenshot?.url);
+  return Boolean(firstAttachment?.screenshot?.url || firstAttachment?.pending);
 }
 
 type DimensionsType = {