[FIX] mail: fix race conditions, especially with scroll

The `_update` of some components must take place before the `_update`
of other (usually sibling) components that might directly influence their
layout. This is in particular the case for `_update` that are relying on height.

Prevent force save of scroll position if there are pending hints to adjust it,
and prevent pending hints from overriding new scroll value.

Prevent flicker with message date.

This should fix all known issues related to incorrectly saving or restoring
scroll position.

task-2344226
task-2358066
task-2369332
task-2372339
task-2373741

closes odoo/odoo#61054

Related: odoo/enterprise#14736
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

2 files changed, 11 insertions, 18 deletions

diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js
index e09f0e4946c..4a89514b39a 100644
--- a/addons/mail/static/src/components/message/message.js
+++ b/addons/mail/static/src/components/message/message.js
@@ -11,7 +11,7 @@ const components = {
     PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
 };
 const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
-const { timeFromNow } = require('mail.utils');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
 
 const { _lt } = require('web.core');
 const { getLangDatetimeFormat } = require('web.time');
@@ -41,10 +41,6 @@ class Message extends Component {
              * clicked state, it keeps displaying the commands.
              */
             isClicked: false,
-            /**
-             * Time elapsed from message datetime to current datetime.
-             */
-            timeElapsed: null,
         });
         useStore(props => {
             const message = this.env.models['mail.message'].get(props.messageLocalId);
@@ -78,6 +74,7 @@ class Message extends Component {
                 notifications: 1,
             },
         });
+        useUpdate({ func: () => this._update() });
         /**
          * The intent of the reply button depends on the last rendered state.
          */
@@ -103,14 +100,6 @@ class Message extends Component {
      */
     _constructor() {}
 
-    mounted() {
-        this._update();
-    }
-
-    patched() {
-        this._update();
-    }
-
     willUnmount() {
         clearInterval(this._intervalId);
     }
@@ -393,6 +382,9 @@ class Message extends Component {
      * @private
      */
     _update() {
+        if (!this.message) {
+            return;
+        }
         // Remove all readmore before if any before reinsert them with _insertReadMoreLess.
         // This is needed because _insertReadMoreLess is working with direct DOM mutations
         // which are not sync with Owl.
@@ -401,14 +393,15 @@ class Message extends Component {
                 el.remove();
             }
             this._insertReadMoreLess($(this._contentRef.el));
+            this.env.messagingBus.trigger('o-component-message-read-more-less-inserted', {
+                message: this.message,
+            });
         }
         this._wasSelected = this.props.isSelected;
-        if (!this.state.timeElapsed) {
-            this.state.timeElapsed = timeFromNow(this.message.date);
-        }
+        this.message.refreshDateFromNow();
         clearInterval(this._intervalId);
         this._intervalId = setInterval(() => {
-            this.state.timeElapsed = timeFromNow(this.message.date);
+            this.message.refreshDateFromNow();
         }, 60 * 1000);
     }
 
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 29cb10207d7..300130f6518 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -74,7 +74,7 @@
                                 </div>
                             </t>
                             <div class="o_Message_date o_Message_headerDate" t-att-class="{ 'o-message-selected': props.isSelected }" t-att-title="datetime">
-                                - <t t-esc="state.timeElapsed"/>
+                                - <t t-esc="message.dateFromNow"/>
                             </div>
                             <t t-if="message.isCurrentPartnerAuthor and threadView and threadView.thread">
                                 <MessageSeenIndicator class="o_Message_seenIndicator" messageLocalId="message.localId" threadLocalId="threadView.thread.localId"/>