From 0faeb2b769206b8f118b204ea7777d1ebd4cc769 Mon Sep 17 00:00:00 2001
From: Dhruv Patel <dhp@odoo.com>
Date: Fri, 26 Mar 2021 18:59:34 +0000
Subject: [PATCH] [FIX] mail: chatter autoloading loads more messages too
 quickly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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#68430

X-original-commit: 63b15e23d95b310a12bdbc30c983081ed84187a3
Related: odoo/enterprise#17335
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../static/src/components/chatter/chatter.js  | 16 ++++++
 .../static/src/components/chatter/chatter.xml |  3 +-
 .../components/message_list/message_list.js   | 56 +++++++++++++------
 .../src/components/thread_view/thread_view.js |  8 +++
 .../components/thread_view/thread_view.xml    |  1 +
 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
@@ -47,10 +47,16 @@ class Chatter extends Component {
          * Reference of the composer. Useful to focus it.
          */
         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 ecb1bed1764..bdb3f13ee40 100644
--- a/addons/mail/static/src/components/message_list/message_list.js
+++ b/addons/mail/static/src/components/message_list/message_list.js
@@ -100,8 +100,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,
         };
     }
 
@@ -190,14 +190,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;
     }
 
     /**
@@ -278,11 +278,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;
     }
 
     /**
@@ -356,13 +356,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;
         }
@@ -378,7 +378,7 @@ class MessageList extends Component {
             order,
         } = this._lastRenderedValues();
         if (
-            !this.el ||
+            !this._getScrollableElement() ||
             !hasScrollAdjust ||
             !this._willPatchSnapshot ||
             order === 'desc'
@@ -386,7 +386,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);
     }
 
     /**
@@ -398,12 +398,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;
@@ -434,6 +434,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}
@@ -444,7 +456,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;
     }
@@ -467,7 +479,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);
     }
 
     /**
@@ -526,11 +538,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,
@@ -544,12 +556,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()) {
@@ -572,6 +584,14 @@ Object.assign(MessageList, {
         order: 'asc',
     },
     props: {
+        /**
+         * 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,
+        },
         hasMessageCheckbox: Boolean,
         hasSquashCloseMessages: Boolean,
         haveMessagesMarkAsReadIcon: Boolean,
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 30e36ce7399..16dc3e1b165 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.js
+++ b/addons/mail/static/src/components/thread_view/thread_view.js
@@ -182,6 +182,14 @@ Object.assign(ThreadView, {
             type: String,
             validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
         },
+        /**
+         * 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,
+        },
         hasComposer: Boolean,
         hasComposerCurrentPartnerAvatar: {
             type: Boolean,
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 16934160298..72e0dcf04d4 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"