fix: load attachments in the messages list

ts/components/conversation/Image.tsx

@@ -62,25 +62,28 @@ export const Image = (props: Props) => {
     width: _width,
   } = props;
 
-  const onErrorUrlFilterering = useCallback(() => {
-    if (url && onError) {
-      onError();
-    }
-  }, [url, onError]);
   const disableDrag = useDisableDrag();
 
   const { caption } = attachment || { caption: null };
   let { pending } = attachment || { pending: true };
+
   if (!url) {
     // force pending to true if the url is undefined, so we show a loader while decrypting the attachemtn
     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 srcData = !loading ? urlToLoad : '';
 
+  const onErrorUrlFilterering = useCallback(() => {
+    if (!loading && !pending && !url && onError) {
+      onError();
+    }
+  }, [loading, pending, url, onError]);
+
   const width = isNumber(_width) ? `${_width}px` : _width;
   const height = isNumber(_height) ? `${_height}px` : _height;
 

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

@@ -31,6 +31,7 @@ import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
 import { ImageGrid } from '../../ImageGrid';
 import { ClickToTrustSender } from './ClickToTrustSender';
 import { MessageHighlighter } from './MessageHighlighter';
+import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
 
 export type MessageAttachmentSelectorProps = Pick<
   MessageRenderingProps,
@@ -67,6 +68,7 @@ const StyledGenericAttachmentContainer = styled(MessageHighlighter)<{ selected:
 
 export const MessageAttachment = (props: Props) => {
   const { messageId, imageBroken, handleImageError, highlight = false } = props;
+  const isDetailView = useIsDetailMessageView();
 
   const dispatch = useDispatch();
   const attachmentProps = useSelector((state: StateType) =>
@@ -140,6 +142,10 @@ export const MessageAttachment = (props: Props) => {
     ((isImage(attachments) && hasImage(attachments)) ||
       (isVideo(attachments) && hasVideoScreenshot(attachments)))
   ) {
+    // we use the carousel in the detail view
+    if (isDetailView) {
+      return null;
+    }
     return (
       <MessageHighlighter highlight={highlight}>
         <StyledImageGridContainer messageDirection={direction}>

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

@@ -154,8 +154,9 @@ export const MessageContent = (props: Props) => {
 
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
 
-  const isDetailViewAndSupportsAttachmentCarousel =
+  window.log.debug(
-    isDetailView && canDisplayImagePreview(attachments);
+    `WIP: [MessageAttachment] ${props.messageId} timestamp ${timestamp} imageBroken ${imageBroken} display ${canDisplayImagePreview(attachments)} attachments.contentType ${attachments?.[0].contentType || 'none'}`
+  );
 
   return (
     <StyledMessageContent
@@ -204,14 +205,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>