From d8d65a0273712dab4a7493311b738cc7c833b086 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 17 Mar 2025 17:47:10 +0530
Subject: [PATCH] feat: debounce the scroll check

---
 .../widgets/conversation/MessagesView.vue           | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

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 });
     },