diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue index a8ccceeb8..251446267 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue @@ -30,6 +30,7 @@ import { getReadMessages, getUnreadMessages, } from 'dashboard/helper/conversationHelper'; +import { debounce } from '@chatwoot/utils'; // constants import { BUS_EVENTS } from 'shared/constants/busEvents'; @@ -278,6 +279,7 @@ export default { this.addScrollListener(); this.fetchAllAttachmentsFromCurrentChat(); this.fetchSuggestions(); + this.debouncedMarkReadIfRequired = debounce(this.markReadIfRequired, 100); }, unmounted() { @@ -475,15 +477,18 @@ export default { // in case the user has scrolled to the bottom manually // we trigger the makeMessagesRead method if there are unread messages - // TODO: debounce this check to ensure this does not affect performance - if (this.isNearBottom(50) && this.unreadMessageCount !== 0) { - this.makeMessagesRead(); - } + this.debouncedMarkReadIfRequired(); emitter.emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL); this.fetchPreviousMessages(e.target.scrollTop); }, + markReadIfRequired() { + if (this.isNearBottom(50) && this.unreadMessageCount !== 0) { + this.makeMessagesRead(); + } + }, + makeMessagesRead() { this.$store.dispatch('markMessagesRead', { id: this.currentChat.id }); },