[IMP] mail: chatter: better sync between chatter and form view

When switching between records, the displayed thread was still the one of the
previous records until the messages of the current record were loaded, which
could be confusing.

Moreover, when quickly browsing records using the pager, it could happen that
the resulting displayed thread wasn't the one of the displayed record (if
we visited a record with a long thread history, the RPC to load that history
might return after the one of the current record).

This commit aims to always synchronize the displayed thread with the current
record, by
  - directly hide the previous thread when browsing records
  - displaying a spinner after 1s to indicate that the thread is loading and
    (possibly) not empty
  - ensure to only render the thread of the last visited record

addons/mail/static/src/js/chatter.js

@@ -9,8 +9,10 @@ var utils = require('mail.utils');
 var config = require('web.config');
 var core = require('web.core');
 var form_common = require('web.form_common');
+var web_utils = require('web.utils');
 
 var _t = core._t;
+var QWeb = core.qweb;
 
 // -----------------------------------------------------------------------------
 // Chat Composer for the Chatter
@@ -284,6 +286,7 @@ var Chatter = form_common.AbstractField.extend({
         this.model = this.view.dataset.model;
         this.res_id = undefined;
         this.context = this.options.context || {};
+        this.dp = new web_utils.DropPrevious();
     },
 
     willStart: function () {
@@ -344,7 +347,17 @@ var Chatter = form_common.AbstractField.extend({
         var self = this;
         options = options || {};
         options.ids = ids;
-        return chat_manager.get_messages(options).then(function (raw_messages) {
+
+        // Ensure that only the last loaded thread is rendered to prevent displaying the wrong thread
+        var fetch_def = this.dp.add(chat_manager.get_messages(options));
+
+        // Empty thread and display a spinner after 1s to indicate that it is loading
+        this.thread.$el.empty();
+        web_utils.reject_after(web_utils.delay(1000), fetch_def).then(function () {
+            self.thread.$el.append(QWeb.render('mail.ChatterSpinner', {}));
+        });
+
+        return fetch_def.then(function (raw_messages) {
             self.thread.render(raw_messages, {display_load_more: raw_messages.length < ids.length});
         });
     },

addons/mail/static/src/less/chatter.less

@@ -25,5 +25,10 @@
 
     .o_mail_thread {
         margin-top: 10px;
+
+        .o_spinner {
+            text-align: center;
+            font-size: large;
+        }
     }
 }

addons/mail/static/src/xml/chatter.xml

@@ -64,4 +64,8 @@
         </div>
     </t>
 
+    <t t-name="mail.ChatterSpinner">
+        <div class="o_spinner"> <span class="fa fa-spinner fa-spin"/> </div>
+    </t>
+
 </templates>