From e8ce14fcd755ccf78566499e6341b3836e22c5fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Wed, 29 Nov 2023 17:26:24 +0100
Subject: [PATCH] [FIX] mail: avoid loading more messages than intended
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The IntersectionObserver was sometimes started and called its callback
before the scroll was restored, in which case the load more button was
always visible, leading to loading more messages than intended.

To fix, delay the starting of the visible until the scroll is restored.

runbot-35533

closes odoo/odoo#144228

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/core/common/thread.js | 13 ++++++++-----
 addons/mail/static/src/utils/common/hooks.js | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/addons/mail/static/src/core/common/thread.js b/addons/mail/static/src/core/common/thread.js
index df489238d23..ad412a7062b 100644
--- a/addons/mail/static/src/core/common/thread.js
+++ b/addons/mail/static/src/core/common/thread.js
@@ -88,7 +88,7 @@ export class Thread extends Component {
                     this.threadService.fetchMoreMessages(this.props.thread);
                 }
             },
-            { init: null }
+            { init: null, ready: false }
         );
         this.loadNewerState = useVisible(
             "load-newer",
@@ -97,7 +97,7 @@ export class Thread extends Component {
                     this.threadService.fetchMoreMessages(this.props.thread, "newer");
                 }
             },
-            { init: null }
+            { init: null, ready: false }
         );
         this.presentThresholdState = useVisible(
             "present-treshold",
@@ -239,9 +239,7 @@ export class Thread extends Component {
             saveScroll();
         };
         const applyScroll = () => {
-            if (this.state.mountedAndLoaded) {
-                loadedAndPatched = true;
-            } else {
+            if (!this.state.mountedAndLoaded) {
                 return;
             }
             // Use toRaw() to prevent scroll check from triggering renders.
@@ -276,6 +274,11 @@ export class Thread extends Component {
             newestPersistentMessage = thread.newestPersistentMessage;
             oldestPersistentMessage = thread.oldestPersistentMessage;
             loadNewer = thread.loadNewer;
+            if (!loadedAndPatched) {
+                loadedAndPatched = true;
+                this.loadOlderState.ready = true;
+                this.loadNewerState.ready = true;
+            }
         };
         onWillPatch(() => {
             if (!loadedAndPatched) {
diff --git a/addons/mail/static/src/utils/common/hooks.js b/addons/mail/static/src/utils/common/hooks.js
index 5f00c681fac..c854f44ec91 100644
--- a/addons/mail/static/src/utils/common/hooks.js
+++ b/addons/mail/static/src/utils/common/hooks.js
@@ -163,9 +163,12 @@ export function useAutoScroll(refName, shouldScrollPredicate = () => true) {
  * @param {string} refName
  * @param {function} cb
  */
-export function useVisible(refName, cb, { init = false } = {}) {
+export function useVisible(refName, cb, { init = false, ready = true } = {}) {
     const ref = useRef(refName);
-    const state = { isVisible: init };
+    const state = useState({
+        isVisible: init,
+        ready,
+    });
     function setValue(value) {
         state.isVisible = value;
         cb();
@@ -174,8 +177,8 @@ export function useVisible(refName, cb, { init = false } = {}) {
         setValue(entries.at(-1).isIntersecting);
     });
     useEffect(
-        (el) => {
-            if (el) {
+        (el, ready) => {
+            if (el && ready) {
                 observer.observe(el);
                 return () => {
                     setValue(false);
@@ -183,7 +186,7 @@ export function useVisible(refName, cb, { init = false } = {}) {
                 };
             }
         },
-        () => [ref.el]
+        () => [ref.el, state.ready]
     );
     return state;
 }