feat: Add infinite loader, option for increasing page size (#8525)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/finders/conversation_finder.rb

@@ -160,6 +160,6 @@ class ConversationFinder
       :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
     )
     sort_by = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['latest']
-    @conversations.send(sort_by).page(current_page)
+    @conversations.send(sort_by).page(current_page).per(ENV.fetch('CONVERSATION_RESULTS_PER_PAGE', '25').to_i)
   end
 end

app/javascript/dashboard/components/ChatList.vue

@@ -126,11 +126,10 @@
       @assign-team="onAssignTeamsForBulk"
     />
     <div
-      ref="activeConversation"
+      ref="conversationList"
       class="conversations-list flex-1"
       :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
-      <div>
       <conversation-card
         v-for="chat in conversationList"
         :key="chat.id"
@@ -151,24 +150,17 @@
         @mark-as-unread="markAsUnread"
         @assign-priority="assignPriority"
       />
-      </div>
       <div v-if="chatListLoading" class="text-center">
         <span class="spinner mt-4 mb-4" />
       </div>
-
-      <woot-button
-        v-if="!hasCurrentPageEndReached && !chatListLoading"
-        variant="clear"
-        size="expanded"
-        class="load-more--button"
-        @click="loadMoreConversations"
-      >
-        {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
-      </woot-button>
-
       <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
         {{ $t('CHAT_LIST.EOF') }}
       </p>
+      <intersection-observer
+        v-if="!showEndOfListMessage && !chatListLoading"
+        :options="infiniteLoaderOptions"
+        @observed="loadMoreConversations"
+      />
     </div>
     <woot-modal
       :show.sync="showAdvancedFilters"
@@ -222,6 +214,7 @@ import {
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
+import IntersectionObserver from './IntersectionObserver.vue';
 
 export default {
   components: {
@@ -232,6 +225,7 @@ export default {
     DeleteCustomViews,
     ConversationBulkActions,
     ConversationBasicFilter,
+    IntersectionObserver,
   },
   mixins: [
     timeMixin,
@@ -291,6 +285,10 @@ export default {
       selectedInboxes: [],
       isContextMenuOpen: false,
       appliedFilter: [],
+      infiniteLoaderOptions: {
+        root: this.$refs.conversationList,
+        rootMargin: '100px 0px 100px 0px',
+      },
     };
   },
   computed: {
@@ -635,10 +633,10 @@ export default {
       );
     },
     getKeyboardListenerParams() {
-      const allConversations = this.$refs.activeConversation.querySelectorAll(
+      const allConversations = this.$refs.conversationList.querySelectorAll(
         'div.conversations-list div.conversation'
       );
-      const activeConversation = this.$refs.activeConversation.querySelector(
+      const activeConversation = this.$refs.conversationList.querySelector(
         'div.conversations-list div.conversation.active'
       );
       const activeConversationIndex = [...allConversations].indexOf(
@@ -697,6 +695,9 @@ export default {
         .then(() => this.$emit('conversation-load'));
     },
     loadMoreConversations() {
+      if (this.hasCurrentPageEndReached || this.chatListLoading) {
+        return;
+      }
       if (!this.hasAppliedFiltersOrActiveFolders) {
         this.fetchConversations();
       }

app/javascript/dashboard/components/IntersectionObserver.vue

@@ -0,0 +1,34 @@
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
+    },
+  },
+  mounted() {
+    this.intersectionObserver = null;
+    this.registerInfiniteLoader();
+  },
+  beforeDestroy() {
+    this.unobserveInfiniteLoadObserver();
+  },
+  methods: {
+    registerInfiniteLoader() {
+      this.intersectionObserver = new IntersectionObserver(entries => {
+        if (entries && entries[0].isIntersecting) {
+          this.$emit('observed');
+        }
+      }, this.options);
+      this.intersectionObserver.observe(this.$refs.observedElement);
+    },
+    unobserveInfiniteLoadObserver() {
+      this.intersectionObserver.unobserve(this.$refs.observedElement);
+    },
+  },
+};
+</script>