From 80e83f17d4e0c110ebace7c39462fda7bf88e4c0 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Wed, 4 May 2016 14:34:47 +0200
Subject: [PATCH] [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     | 15 ++++++++++++++-
 addons/mail/static/src/less/chatter.less |  5 +++++
 addons/mail/static/src/xml/chatter.xml   |  4 ++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/addons/mail/static/src/js/chatter.js b/addons/mail/static/src/js/chatter.js
index 22c3f94f2b5..5e2e525f9b4 100644
--- a/addons/mail/static/src/js/chatter.js
+++ b/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});
         });
     },
diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less
index 1ac1df1a65d..fae683f95e7 100644
--- a/addons/mail/static/src/less/chatter.less
+++ b/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;
+        }
     }
 }
diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml
index 22931689bde..20df7a52e9c 100644
--- a/addons/mail/static/src/xml/chatter.xml
+++ b/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>