[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>

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

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
     //--------------------------------------------------------------------------

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;

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
     -->

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);