[FIX] mail: messaging ready after 1st chatter rendering

Revision on https://github.com/odoo/odoo/commit/9a66619db33fca5f0cb81d9f6bfeb0fb0290cf68

Commit above improves the web client startup by not having to wait
for discuss widgets to fully load beforehand.

However, it introduced an issue with chatter when the 1st rendering
happens before messaging becomes ready: it displays
"Creating a record..." instead of the whole history of messages.
This happens because when messaging is ready, it updates data from
the chatter but it does not trigger a re-render.

This commit fixes the issue by triggering a re-render on messaging
ready. When messaging is not ready, thread field now displays
"Loading..." instead of the message "Creating a record...".

Task-Id 2078193

closes odoo/odoo#38751

X-original-commit: 93bdd7c91095025f4d6e7a058e0ab1c4e1a0ad60
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

5 files changed, 73 insertions, 1 deletions

diff --git a/addons/mail/static/src/js/thread_field.js b/addons/mail/static/src/js/thread_field.js
index 218a4b552ec..2d809def129 100644
--- a/addons/mail/static/src/js/thread_field.js
+++ b/addons/mail/static/src/js/thread_field.js
@@ -112,7 +112,10 @@ var ThreadField = AbstractField.extend({
      */
     _fetchAndRenderThread: function (options) {
         var self = this;
-        if (!this._documentThread) {
+        if (!this._isMessagingReady) {
+            self._threadWidget.renderLoading();
+            return Promise.resolve();
+        } else if (!this._documentThread) {
             var thread = new CreateModeDocumentThread();
             options = { isCreateMode: true };
             self._threadWidget.render(thread, options);
@@ -199,6 +202,7 @@ var ThreadField = AbstractField.extend({
             return;
         }
         this._setDocumentThread();
+        this._render();
     },
     /**
      * @private
diff --git a/addons/mail/static/src/js/thread_widget.js b/addons/mail/static/src/js/thread_widget.js
index 9550931ad95..3ec66d02520 100644
--- a/addons/mail/static/src/js/thread_widget.js
+++ b/addons/mail/static/src/js/thread_widget.js
@@ -55,6 +55,7 @@ var ThreadWidget = Widget.extend({
      */
     init: function (parent, options) {
         this._super.apply(this, arguments);
+        this.attachments = [];
         // options when the thread is enabled (e.g. can send message,
         // interact on messages, etc.)
         this._enabledOptions = _.defaults(options || {}, {
@@ -220,6 +221,14 @@ var ThreadWidget = Widget.extend({
         }
     },
 
+    /**
+     * Render thread widget when loading, i.e. when messaging is not yet ready.
+     * @see /mail/init_messaging
+     */
+    renderLoading: function () {
+        this.$el.html(QWeb.render('mail.widget.ThreadLoading'));
+    },
+
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index ef220afa06c..c64b3f6aefd 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -1,3 +1,13 @@
+.o_mail_thread_loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_mail_thread_loading_icon {
+    margin-right: 5px;
+}
+
 .o_mail_thread, .o_mail_activity {
     .o_thread_show_more {
         text-align: center;
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 24370c65e4e..31614cf4f4f 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -30,6 +30,12 @@
         </div>
     </t>
 
+    <!-- Rendering of thread when messaging not yet ready -->
+    <div t-name="mail.widget.ThreadLoading" class="o_mail_thread_loading">
+        <i class="o_mail_thread_loading_icon fa fa-spinner fa-spin"/>
+        <span>Please wait...</span>
+    </div>
+
     <!--
         @param {mail.DocumentViewer} widget
     -->
diff --git a/addons/mail/static/tests/chatter_tests.js b/addons/mail/static/tests/chatter_tests.js
index 02242f3ef2a..81742d8d2c2 100644
--- a/addons/mail/static/tests/chatter_tests.js
+++ b/addons/mail/static/tests/chatter_tests.js
@@ -203,6 +203,49 @@ QUnit.module('Chatter', {
     }
 });
 
+QUnit.test('messaging becomes ready', async function (assert) {
+    assert.expect(2);
+
+    const initMessagingProm = testUtils.makeTestPromise();
+    const form = await createView({
+        View: FormView,
+        model: 'partner',
+        data: this.data,
+        services: this.services,
+        arch: `<form string="Partners">
+                <sheet>
+                    <field name="foo"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids" widget="mail_thread"/>
+                </div>
+            </form>`,
+        async mockRPC(route, args) {
+            const _super = this._super.bind(this, route, args); // limitation on class.js with async/await
+            if (route === '/mail/init_messaging') {
+                await initMessagingProm;
+            }
+            return _super();
+        },
+        res_id: 2,
+    });
+    await testUtils.nextTick();
+    assert.containsOnce(
+        form,
+        '.o_mail_thread_loading',
+        "thread should be loading when messaging is not yet ready");
+
+    // simulate messaging becoming ready
+    initMessagingProm.resolve();
+    await testUtils.nextTick();
+    assert.containsNone(
+        form,
+        '.o_mail_thread_loading',
+        "thread should no longer be loading when messaging becomes ready");
+
+    form.destroy();
+});
+
 QUnit.test('basic rendering', async function (assert) {
     assert.expect(9);