feat: debounce the scroll check

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