From 7a5e08bdd3dbce820625a704e66908d31b295fc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Thu, 17 Dec 2020 11:11:30 +0000
Subject: [PATCH] [FIX] mail: speed up render of Message by inserting content
 manually
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`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#63539

X-original-commit: cc531a07002fd8642f53e77c0fa52a49753e9df8
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../mail/static/src/components/message/message.js  | 14 ++++++++++++++
 .../mail/static/src/components/message/message.xml |  2 +-
 .../static/src/components/message/message_tests.js |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js
index 7c4388f5a27..aaec2088063 100644
--- a/addons/mail/static/src/components/message/message.js
+++ b/addons/mail/static/src/components/message/message.js
@@ -83,6 +83,16 @@ class Message extends Component {
          * The intent of the reply button depends on the last rendered state.
          */
         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.
          */
@@ -382,6 +392,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.
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index f60eab136f8..00d0ff54115 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -157,7 +157,7 @@
                         </t>
                     </t>
                     <div class="o_Message_content" t-ref="content">
-                        <t t-raw="message.prettyBody"/>
+                        <div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() -->
                         <t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription">
                             <p t-esc="message.subtype_description"/>
                         </t>
diff --git a/addons/mail/static/src/components/message/message_tests.js b/addons/mail/static/src/components/message/message_tests.js
index 2c921805907..79a5a058fcc 100644
--- a/addons/mail/static/src/components/message/message_tests.js
+++ b/addons/mail/static/src/components/message/message_tests.js
@@ -111,7 +111,7 @@ QUnit.test('basic rendering', async function (assert) {
         "message should display the content"
     );
     assert.strictEqual(
-        messageEl.querySelector(`:scope .o_Message_content`).innerHTML,
+        messageEl.querySelector(`:scope .o_Message_prettyBody`).innerHTML,
         "<p>Test</p>",
         "message should display the correct content"
     );