diff --git a/src/components/chat-view-container/chat-view.tsx b/src/components/chat-view-container/chat-view.tsx index 43768e9b9..af53a59d9 100644 --- a/src/components/chat-view-container/chat-view.tsx +++ b/src/components/chat-view-container/chat-view.tsx @@ -180,6 +180,7 @@ export class ChatView extends React.Component { loadAttachmentDetails={this.props.loadAttachmentDetails} sendEmojiReaction={this.props.sendEmojiReaction} reactions={message.reactions} + messagesFetchStatus={this.props.messagesFetchStatus} {...message} /> diff --git a/src/components/message/index.test.tsx b/src/components/message/index.test.tsx index e80ba02cb..70161aeaa 100644 --- a/src/components/message/index.test.tsx +++ b/src/components/message/index.test.tsx @@ -11,6 +11,7 @@ import { ParentMessage } from './parent-message'; import { IconAlertCircle } from '@zero-tech/zui/icons'; import { Spinner } from '@zero-tech/zui/components/LoadingIndicator/Spinner'; import AttachmentCards from '../../platform-apps/channels/attachment-cards'; +import { MessagesFetchState } from '../../store/channels'; describe('message', () => { const sender = { @@ -125,25 +126,44 @@ describe('message', () => { expect(wrapper).toHaveElement(Spinner); }); - it('calls loadAttachmentDetails if no media url', () => { + it('calls loadAttachmentDetails if no media url and messagesFetchStatus is success', () => { const loadAttachmentDetails = jest.fn(); - subject({ messageId: 'test-id', loadAttachmentDetails, media: { url: null, type: MediaType.Image } }); + subject({ + messageId: 'test-id', + loadAttachmentDetails, + media: { url: null, type: MediaType.Image }, + messagesFetchStatus: MessagesFetchState.SUCCESS, + }); expect(loadAttachmentDetails).toHaveBeenCalled(); }); - it('calls loadAttachmentDetails if url is a matrix media url', () => { + it('calls loadAttachmentDetails if url is a matrix media url and messagesFetchStatus is success', () => { const loadAttachmentDetails = jest.fn(); subject({ messageId: 'test-id', loadAttachmentDetails, media: { url: 'mxc://some-test-matrix-url', type: MediaType.Image }, + messagesFetchStatus: MessagesFetchState.SUCCESS, }); expect(loadAttachmentDetails).toHaveBeenCalled(); }); + it('does not call loadAttachmentDetails if messagesFetchStatus is not success', () => { + const loadAttachmentDetails = jest.fn(); + + subject({ + messageId: 'test-id', + loadAttachmentDetails, + media: { url: null, type: MediaType.Image }, + messagesFetchStatus: MessagesFetchState.FAILED, + }); + + expect(loadAttachmentDetails).not.toHaveBeenCalled(); + }); + it('does not call loadAttachmentDetails if url is defined and not a matrix media url', () => { const loadAttachmentDetails = jest.fn(); @@ -151,6 +171,7 @@ describe('message', () => { messageId: 'test-id', loadAttachmentDetails, media: { url: 'some-test-url', type: MediaType.Image, downloadStatus: MediaDownloadStatus.Failed }, + messagesFetchStatus: MessagesFetchState.SUCCESS, }); expect(loadAttachmentDetails).not.toHaveBeenCalled(); @@ -163,6 +184,7 @@ describe('message', () => { messageId: 'test-id', loadAttachmentDetails, media: { url: null, type: MediaType.Image, downloadStatus: MediaDownloadStatus.Failed }, + messagesFetchStatus: MessagesFetchState.SUCCESS, }); expect(loadAttachmentDetails).not.toHaveBeenCalled(); @@ -175,6 +197,7 @@ describe('message', () => { messageId: 'test-id', loadAttachmentDetails, media: { url: null, type: MediaType.Image, downloadStatus: MediaDownloadStatus.Loading }, + messagesFetchStatus: MessagesFetchState.SUCCESS, }); expect(loadAttachmentDetails).not.toHaveBeenCalled(); diff --git a/src/components/message/index.tsx b/src/components/message/index.tsx index 44bd96209..3fa911c8e 100644 --- a/src/components/message/index.tsx +++ b/src/components/message/index.tsx @@ -14,7 +14,7 @@ import { download } from '../../lib/api/attachment'; import { LinkPreview } from '../link-preview'; import { getProvider } from '../../lib/cloudinary/provider'; import { MessageInput } from '../message-input/container'; -import { User } from '../../store/channels'; +import { MessagesFetchState, User } from '../../store/channels'; import { ParentMessage as ParentMessageType } from '../../lib/chat/types'; import { UserForMention } from '../message-input/utils'; import EditMessageActions from './edit-message-actions/edit-message-actions'; @@ -64,6 +64,7 @@ interface Properties extends MessageModel { loadAttachmentDetails: (payload: { media: Media; messageId: string }) => void; sendEmojiReaction: (messageId, key) => void; onReportUser: (payload: { reportedUserId: string }) => void; + messagesFetchStatus: MessagesFetchState; } export interface State { @@ -304,7 +305,7 @@ export class Message extends React.Component { const isLoading = downloadStatus === MediaDownloadStatus.Loading; const hasFailed = downloadStatus === MediaDownloadStatus.Failed; - if (!hasFailed && !isLoading) { + if (!hasFailed && !isLoading && this.props.messagesFetchStatus === MessagesFetchState.SUCCESS) { this.props.loadAttachmentDetails({ media, messageId: media.id ?? this.props.messageId.toString() }); }