[FIX] mail: chatter autoloading loads more messages too quickly

if you check on any chatter with a lot of messages, you will see that it starts
loading all the messages as soon as you scroll down even just 1 pixel.
This makes a lot of loading of the messages for no reason unnecessarily.
What should happen instead is that it should load more message only when
scrolling all the way down to the bottom.This works fine in chatwindow & discuss.

With this commit, resolved this issue by providing the exact scrollable element
to the message list from parent component to the child. so with proper element
we can have proper scrollable heights and other dimensions as well to handle
load more messages properly.

Task : 2382735

closes odoo/odoo#66584

Related: odoo/enterprise#16767
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

5 files changed, 65 insertions, 19 deletions

diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js
index 42462e930f9..3f6ca7dca41 100644
--- a/addons/mail/static/src/components/chatter/chatter.js
+++ b/addons/mail/static/src/components/chatter/chatter.js
@@ -48,9 +48,15 @@ class Chatter extends Component {
          */
         this._composerRef = useRef('composer');
         /**
+         * Reference of the scroll Panel (Real scroll element). Useful to pass the Scroll element to
+         * child component to handle proper scrollable element.
+         */
+        this._scrollPanelRef = useRef('scrollPanel');
+        /**
          * Reference of the message list. Useful to trigger the scroll event on it.
          */
         this._threadRef = useRef('thread');
+        this.getScrollableElement = this.getScrollableElement.bind(this);
     }
 
     //--------------------------------------------------------------------------
@@ -64,6 +70,16 @@ class Chatter extends Component {
         return this.env.models['mail.chatter'].get(this.props.chatterLocalId);
     }
 
+    /**
+     * @returns {Element|undefined} Scrollable Element
+     */
+    getScrollableElement() {
+        if (!this._scrollPanelRef.el) {
+            return;
+        }
+        return this._scrollPanelRef.el;
+    }
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index ffb27244471..d9cf20b478e 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -24,7 +24,7 @@
                         />
                     </t>
                 </div>
-                <div class="o_Chatter_scrollPanel" t-on-scroll="_onScrollPanelScroll">
+                <div class="o_Chatter_scrollPanel" t-on-scroll="_onScrollPanelScroll" t-ref="scrollPanel">
                     <t t-if="chatter.isAttachmentBoxVisible">
                         <AttachmentBox
                             class="o_Chatter_attachmentBox"
@@ -40,6 +40,7 @@
                     <t t-if="chatter.threadView">
                         <ThreadView
                             class="o_Chatter_thread"
+                            getScrollableElement="getScrollableElement"
                             hasComposer="false"
                             hasScrollAdjust="chatter.hasMessageListScrollAdjust"
                             order="'desc'"
diff --git a/addons/mail/static/src/components/message_list/message_list.js b/addons/mail/static/src/components/message_list/message_list.js
index a3ecb0ae0c7..245fd33596a 100644
--- a/addons/mail/static/src/components/message_list/message_list.js
+++ b/addons/mail/static/src/components/message_list/message_list.js
@@ -99,8 +99,8 @@ class MessageList extends Component {
             isLastMessageVisible:
                 lastMessageRef &&
                 lastMessageRef.isBottomVisible({ offset: 10 }),
-            scrollHeight: this.el.scrollHeight,
-            scrollTop: this.el.scrollTop,
+            scrollHeight: this._getScrollableElement().scrollHeight,
+            scrollTop: this._getScrollableElement().scrollTop,
         };
     }
 
@@ -189,14 +189,14 @@ class MessageList extends Component {
      * @returns {integer}
      */
     getScrollHeight() {
-        return this.el.scrollHeight;
+        return this._getScrollableElement().scrollHeight;
     }
 
     /**
      * @returns {integer}
      */
     getScrollTop() {
-        return this.el.scrollTop;
+        return this._getScrollableElement().scrollTop;
     }
 
     /**
@@ -277,11 +277,11 @@ class MessageList extends Component {
      * @param {integer} value
      */
     setScrollTop(value) {
-        if (this.el.scrollTop === value) {
+        if (this._getScrollableElement().scrollTop === value) {
             return;
         }
         this._isLastScrollProgrammatic = true;
-        this.el.scrollTop = value;
+        this._getScrollableElement().scrollTop = value;
     }
 
     /**
@@ -355,13 +355,13 @@ class MessageList extends Component {
             hasScrollAdjust,
             order,
         } = this._lastRenderedValues();
-        if (!this.el || !hasScrollAdjust) {
+        if (!this._getScrollableElement() || !hasScrollAdjust) {
             return;
         }
         if (!hasAutoScrollOnMessageReceived) {
             if (order === 'desc' && this._willPatchSnapshot) {
                 const { scrollHeight, scrollTop } = this._willPatchSnapshot;
-                this.setScrollTop(this.el.scrollHeight - scrollHeight + scrollTop);
+                this.setScrollTop(this._getScrollableElement().scrollHeight - scrollHeight + scrollTop);
             }
             return;
         }
@@ -377,7 +377,7 @@ class MessageList extends Component {
             order,
         } = this._lastRenderedValues();
         if (
-            !this.el ||
+            !this._getScrollableElement() ||
             !hasScrollAdjust ||
             !this._willPatchSnapshot ||
             order === 'desc'
@@ -385,7 +385,7 @@ class MessageList extends Component {
             return;
         }
         const { scrollHeight, scrollTop } = this._willPatchSnapshot;
-        this.setScrollTop(this.el.scrollHeight - scrollHeight + scrollTop);
+        this.setScrollTop(this._getScrollableElement().scrollHeight - scrollHeight + scrollTop);
     }
 
     /**
@@ -397,12 +397,12 @@ class MessageList extends Component {
             threadCacheInitialScrollHeight,
             threadCacheInitialScrollPosition,
         } = this._lastRenderedValues();
-        if (!this.el || !hasScrollAdjust) {
+        if (!this._getScrollableElement() || !hasScrollAdjust) {
             return;
         }
         if (
             threadCacheInitialScrollPosition !== undefined &&
-            this.el.scrollHeight === threadCacheInitialScrollHeight
+            this._getScrollableElement().scrollHeight === threadCacheInitialScrollHeight
         ) {
             this.setScrollTop(threadCacheInitialScrollPosition);
             return;
@@ -435,6 +435,18 @@ class MessageList extends Component {
 
     /**
      * @private
+     * @returns {Element|undefined} Scrollable Element
+     */
+    _getScrollableElement() {
+        if (this.props.getScrollableElement) {
+            return this.props.getScrollableElement();
+        } else {
+            return this.el;
+        }
+    }
+
+    /**
+     * @private
      * @returns {boolean}
      */
     _isLoadMoreVisible() {
@@ -443,7 +455,7 @@ class MessageList extends Component {
             return false;
         }
         const loadMoreRect = loadMore.getBoundingClientRect();
-        const elRect = this.el.getBoundingClientRect();
+        const elRect = this._getScrollableElement().getBoundingClientRect();
         const isInvisible = loadMoreRect.top > elRect.bottom || loadMoreRect.bottom < elRect.top;
         return !isInvisible;
     }
@@ -466,7 +478,7 @@ class MessageList extends Component {
      */
     _scrollToEnd() {
         const { order } = this._lastRenderedValues();
-        this.setScrollTop(order === 'asc' ? this.el.scrollHeight - this.el.clientHeight : 0);
+        this.setScrollTop(order === 'asc' ? this._getScrollableElement().scrollHeight - this._getScrollableElement().clientHeight : 0);
     }
 
     /**
@@ -511,11 +523,11 @@ class MessageList extends Component {
             threadView,
             threadViewer,
         } = this._lastRenderedValues();
-        if (!this.el) {
+        if (!this._getScrollableElement()) {
             // could be unmounted in the meantime (due to throttled behavior)
             return;
         }
-        const scrollTop = this.el.scrollTop;
+        const scrollTop = this._getScrollableElement().scrollTop;
         this.env.messagingBus.trigger('o-component-message-list-scrolled', {
             orderedMessages,
             scrollTop,
@@ -529,12 +541,12 @@ class MessageList extends Component {
             // Automatically scroll to new received messages only when the list is
             // currently fully scrolled.
             const hasAutoScrollOnMessageReceived = (order === 'asc')
-                ? scrollTop >= this.el.scrollHeight - this.el.clientHeight - margin
+                ? scrollTop >= this._getScrollableElement().scrollHeight - this._getScrollableElement().clientHeight - margin
                 : scrollTop <= margin;
             threadView.update({ hasAutoScrollOnMessageReceived });
         }
         if (threadViewer && threadViewer.exists()) {
-            threadViewer.saveThreadCacheScrollHeightAsInitial(this.el.scrollHeight, threadCache);
+            threadViewer.saveThreadCacheScrollHeightAsInitial(this._getScrollableElement().scrollHeight, threadCache);
             threadViewer.saveThreadCacheScrollPositionsAsInitial(scrollTop, threadCache);
         }
         if (!this._isLastScrollProgrammatic && this._isLoadMoreVisible()) {
@@ -562,6 +574,14 @@ Object.assign(MessageList, {
         haveMessagesMarkAsReadIcon: Boolean,
         haveMessagesReplyIcon: Boolean,
         hasScrollAdjust: Boolean,
+        /**
+         * Function returns the exact scrollable element from the parent
+         * to manage proper scroll heights which affects the load more messages.
+         */
+        getScrollableElement: {
+            type: Function,
+            optional: true,
+        },
         order: {
             type: String,
             validate: prop => ['asc', 'desc'].includes(prop),
diff --git a/addons/mail/static/src/components/thread_view/thread_view.js b/addons/mail/static/src/components/thread_view/thread_view.js
index 5b0f5f4a57a..2399fd165c5 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.js
+++ b/addons/mail/static/src/components/thread_view/thread_view.js
@@ -202,6 +202,14 @@ Object.assign(ThreadView, {
             type: String,
             optional: true,
         },
+        /**
+         * Function returns the exact scrollable element from the parent
+         * to manage proper scroll heights which affects the load more messages.
+         */
+        getScrollableElement: {
+            type: Function,
+            optional: true,
+        },
         showComposerAttachmentsExtensions: Boolean,
         showComposerAttachmentsFilenames: Boolean,
         threadViewLocalId: String,
diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml
index 495408cc8f6..8f06bf394fa 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.xml
+++ b/addons/mail/static/src/components/thread_view/thread_view.xml
@@ -12,6 +12,7 @@
                 <t t-elif="threadView.threadCache.isLoaded or threadView.thread.isTemporary">
                     <MessageList
                         class="o_ThreadView_messageList"
+                        getScrollableElement= "props.getScrollableElement"
                         hasMessageCheckbox="props.hasMessageCheckbox"
                         hasScrollAdjust="props.hasScrollAdjust"
                         hasSquashCloseMessages="props.hasSquashCloseMessages"