Clear messages upon reconnection as late as possible

To avoid a long empty flash while new messages are being fetched again.

spec/mock.js

@@ -314,8 +314,9 @@ window.addEventListener('converse-loaded', () => {
 
 
     mock.openAndEnterChatRoom = async function (_converse, muc_jid, nick, features=[], members=[], force_open=true) {
+        const { api } = _converse;
         muc_jid = muc_jid.toLowerCase();
-        const room_creation_promise = _converse.api.rooms.open(muc_jid, {}, force_open);
+        const room_creation_promise = api.rooms.open(muc_jid, {}, force_open);
         await mock.getRoomFeatures(_converse, muc_jid, features);
         await mock.waitForReservedNick(_converse, muc_jid, nick);
         // The user has just entered the room (because join was called)
@@ -330,7 +331,7 @@ window.addEventListener('converse-loaded', () => {
         const affs = _converse.muc_fetch_members;
         const all_affiliations = Array.isArray(affs) ? affs :  (affs ? ['member', 'admin', 'owner'] : []);
         await mock.returnMemberLists(_converse, muc_jid, members, all_affiliations);
-        await view.model.messages.fetched;
+        return view.model.messages.fetched;
     };
 
     mock.createContact = async function (_converse, name, ask, requesting, subscription) {

spec/muc.js

@@ -789,8 +789,40 @@ describe("Groupchats", function () {
             }));
         });
 
+        it("restores cached messages when it reconnects and clear_messages_on_reconnection and muc_clear_messages_on_leave are false",
+            mock.initConverse(
+                ['rosterGroupsFetched'],
+                {
+                    'clear_messages_on_reconnection': false,
+                    'muc_clear_messages_on_leave': false
+                },
+                async function (done, _converse) {
 
-        it("clears cached messages when it gets closed and clear_messages_on_reconnection is true",
+            const muc_jid = 'lounge@montague.lit';
+            await mock.openAndEnterChatRoom(_converse, muc_jid , 'romeo');
+            const view = _converse.chatboxviews.get(muc_jid);
+            const message = 'Hello world',
+                    nick = mock.chatroom_names[0],
+                    msg = $msg({
+                    'from': 'lounge@montague.lit/'+nick,
+                    'id': u.getUniqueId(),
+                    'to': 'romeo@montague.lit',
+                    'type': 'groupchat'
+                }).c('body').t(message).tree();
+
+            await view.model.handleMessageStanza(msg);
+            await view.model.close();
+
+            _converse.connection.IQ_stanzas = [];
+            await mock.openAndEnterChatRoom(_converse, muc_jid , 'romeo');
+            await u.waitUntil(() => view.el.querySelector('converse-chat-message'));
+            expect(view.model.messages.length).toBe(1);
+            expect(view.el.querySelectorAll('converse-chat-message').length).toBe(1);
+            done()
+        }));
+
+
+        it("clears cached messages when it reconnects and clear_messages_on_reconnection is true",
             mock.initConverse(
                 ['rosterGroupsFetched'], {'clear_messages_on_reconnection': true},
                 async function (done, _converse) {
@@ -808,9 +840,10 @@ describe("Groupchats", function () {
                 }).c('body').t(message).tree();
 
             await view.model.handleMessageStanza(msg);
-            spyOn(view.model, 'clearMessages').and.callThrough();
             await view.model.close();
-            await u.waitUntil(() => view.model.clearMessages.calls.count());
+
+            _converse.connection.IQ_stanzas = [];
+            await mock.openAndEnterChatRoom(_converse, muc_jid , 'romeo');
             expect(view.model.messages.length).toBe(0);
             expect(view.el.querySelector('converse-chat-history')).toBe(null);
             done()

src/headless/plugins/muc/muc.js

@@ -105,7 +105,7 @@ const ChatRoomMixin = {
             await this.fetchMessages().catch(e => log.error(e));
             return true;
         } else {
-            await this.clearCache();
+            this.clearCache();
             return false;
         }
     },
@@ -154,7 +154,7 @@ const ChatRoomMixin = {
         return this;
     },
 
-    async clearCache () {
+    clearCache () {
         this.session.save('connection_status', converse.ROOMSTATUS.DISCONNECTED);
         if (this.occupants.length) {
             // Remove non-members when reconnecting
@@ -163,9 +163,6 @@ const ChatRoomMixin = {
             // Looks like we haven't restored occupants from cache, so we clear it.
             this.occupants.clearStore();
         }
-        if (api.settings.get('clear_messages_on_reconnection')) {
-            await this.clearMessages();
-        }
     },
 
     /**
@@ -261,7 +258,17 @@ const ChatRoomMixin = {
     async onConnectionStatusChanged () {
         if (this.session.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
             await this.occupants.fetchMembers();
+
+            if (api.settings.get('clear_messages_on_reconnection')) {
+                // Don't call this.clearMessages because we don't want to
+                // recreate promises, since that will cause some existing
+                // awaiters to never proceed.
+                await this.messages.clearStore();
+                // A bit hacky. No need to fetch messages after clearing
+                this.messages.fetched.resolve();
+            } else {
                 await this.fetchMessages();
+            }
             /**
              * Triggered when the user has entered a new MUC
              * @event _converse#enteredNewRoom

src/plugins/muc-views/index.js

@@ -86,7 +86,7 @@ converse.plugins.add('converse-muc-views', {
      * If the setting "strict_plugin_dependencies" is set to true,
      * an error will be raised if the plugin is not found.
      */
-    dependencies: ['converse-autocomplete', 'converse-modal', 'converse-controlbox', 'converse-chatview'],
+    dependencies: ['converse-modal', 'converse-controlbox', 'converse-chatview'],
 
     overrides: {
         ControlBoxView: {