[FIX] mail: speed up render of Message by inserting content manually

`t-raw` is too slow due to parsing the HTML in JS, converting it to VDOM and
comparing to existing VDOM. Here we can make a custom comparison based on actual
string, and directly replace in DOM if needed.

Part of task-2399731

closes odoo/odoo#63505

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

1 files changed, 14 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js
index 7423b1443fb..7fc8a1f050a 100644
--- a/addons/mail/static/src/components/message/message.js
+++ b/addons/mail/static/src/components/message/message.js
@@ -81,6 +81,16 @@ class Message extends Component {
          */
         this._wasSelected;
         /**
+         * Value of the last rendered prettyBody. Useful to compare to new value
+         * to decide if it has to be updated.
+         */
+        this._lastPrettyBody;
+        /**
+         * Reference to element containing the prettyBody. Useful to be able to
+         * replace prettyBody with new value in JS (which is faster than t-raw).
+         */
+        this._prettyBodyRef = useRef('prettyBody');
+        /**
          * Reference to the content of the message.
          */
         this._contentRef = useRef('content');
@@ -371,6 +381,10 @@ class Message extends Component {
         if (!this.message) {
             return;
         }
+        if (this._prettyBodyRef.el && this.message.prettyBody !== this._lastPrettyBody) {
+            this._prettyBodyRef.el.innerHTML = this.message.prettyBody;
+            this._lastPrettyBody = this.message.prettyBody;
+        }
         // 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.