Fix retrying of fetching of timed out MAM messages

sass/_chatbox.scss

@@ -232,6 +232,13 @@
                 justify-content: space-between;
             }
 
+            converse-chat-message {
+                .spinner {
+                    width: 100%;
+                    overflow-y: hidden;
+                }
+            }
+
             .chat-content__help {
                 converse-chat-help {
                     border-top: 1px solid var(--chat-head-color);
@@ -247,6 +254,7 @@
             }
 
             .chat-content__messages {
+                overflow-x: hidden;
                 overflow-y: auto;
                 height: 100%;
             }

spec/mam.js

@@ -7,11 +7,15 @@ const $msg = converse.env.$msg;
 const dayjs = converse.env.dayjs;
 const u = converse.env.utils;
 const sizzle = converse.env.sizzle;
+const original_timeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
 // See: https://xmpp.org/rfcs/rfc3921.html
 
 // Implements the protocol defined in https://xmpp.org/extensions/xep-0313.html#config
 describe("Message Archive Management", function () {
 
+    beforeEach(() => (jasmine.DEFAULT_TIMEOUT_INTERVAL = 7000));
+    afterEach(() => (jasmine.DEFAULT_TIMEOUT_INTERVAL = original_timeout));
+
     describe("The XEP-0313 Archive", function () {
 
         it("is queried when the user enters a new MUC",
@@ -194,8 +198,11 @@ describe("Message Archive Management", function () {
                 </iq>`);
             _converse.connection._dataRecv(mock.createRequest(result));
             await u.waitUntil(() => view.model.messages.length === 5);
-            const msg_els = view.content.querySelectorAll('.chat-msg__text');
-            expect(Array.from(msg_els).map(e => e.textContent).join(' ')).toBe("2nd Message 3rd Message 4th Message 5th Message 6th Message");
+            const msg_els = Array.from(view.content.querySelectorAll('.chat-msg__text'));
+            await u.waitUntil(
+                () => msg_els.map(e => e.textContent).join(' ') === "2nd Message 3rd Message 4th Message 5th Message 6th Message",
+                1000
+            );
             done();
         }));
     });
@@ -1038,9 +1045,8 @@ describe("Chatboxes", function () {
             expect(view.model.messages.at(0).get('type')).toBe('error');
             expect(view.model.messages.at(0).get('message')).toBe('Timeout while trying to fetch archived messages.');
 
-            let err_message = view.el.querySelector('.message.chat-error');
+            let err_message = await u.waitUntil(() => view.el.querySelector('.message.chat-error'));
             err_message.querySelector('.retry').click();
-            expect(err_message.querySelector('.spinner')).not.toBe(null);
 
             while (_converse.connection.IQ_stanzas.length) {
                 _converse.connection.IQ_stanzas.pop();
@@ -1058,6 +1064,8 @@ describe("Chatboxes", function () {
                     `</query>`+
                 `</iq>`);
 
+            await u.waitUntil(() => view.el.querySelector('converse-chat-message .spinner'), 1000);
+
             const msg1 = $msg({'id':'aeb212', 'to': contact_jid})
                         .c('result',  {'xmlns': 'urn:xmpp:mam:2', 'queryid': queryid, 'id':'28482-98726-73623'})
                             .c('forwarded', {'xmlns':'urn:xmpp:forward:0'})

src/components/message.js

@@ -1,5 +1,6 @@
 import "./message-body.js";
 import MessageVersionsModal from '../modals/message-versions.js';
+import tpl_spinner from '../templates/spinner.js';
 import dayjs from 'dayjs';
 import { CustomElement } from './element.js';
 import { __ } from '@converse/headless/i18n';
@@ -23,6 +24,7 @@ class Message extends CustomElement {
 
     static get properties () {
         return {
+            allow_retry: { type: Boolean },
             chatview: { type: Object},
             correcting: { type: Boolean },
             editable: { type: Boolean },
@@ -52,6 +54,7 @@ class Message extends CustomElement {
             received: { type: String },
             retractable: { type: Boolean },
             sender: { type: String },
+            show_spinner: { type: Boolean },
             spoiler_hint: { type: String },
             subject: { type: String },
             time: { type: String },
@@ -62,7 +65,10 @@ class Message extends CustomElement {
     render () {
         const format = api.settings.get('time_format');
         this.pretty_time = dayjs(this.time).format(format);
-        if (this.model.get('file') && !this.model.get('oob_url')) {
+        if (this.show_spinner) {
+            return tpl_spinner();
+        }
+        else if (this.model.get('file') && !this.model.get('oob_url')) {
             return this.renderFileProgress();
         } else if (['error', 'info'].includes(this.message_type)) {
             return this.renderInfoMessage();
@@ -85,7 +91,7 @@ class Message extends CustomElement {
                 </div>
                 ${ this.reason ? html`<q class="reason">${this.reason}</q>` : `` }
                 ${ this.error_text ? html`<q class="reason">${this.error_text}</q>` : `` }
-                ${ this.retry ? html`<a class="retry" @click=${this.onRetryClicked}>${i18n_retry}</a>` : '' }
+                ${ this.allow_retry ? html`<a class="retry" @click=${this.onRetryClicked}>${i18n_retry}</a>` : '' }
             </div>
         `;
     }
@@ -145,8 +151,7 @@ class Message extends CustomElement {
     }
 
     async onRetryClicked () {
-        // FIXME
-        // this.showSpinner();
+        this.show_spinner = true;
         await this.model.error.retry();
         this.model.destroy();
         this.parentElement.removeChild(this);

src/headless/converse-chat.js

@@ -535,7 +535,11 @@ converse.plugins.add('converse-chat', {
 
             async createMessageFromError (error) {
                 if (error instanceof _converse.TimeoutError) {
-                    const msg = await this.createMessage({'type': 'error', 'message': error.message, 'retry': true});
+                    const msg = await this.createMessage({
+                        'type': 'error',
+                        'message': error.message,
+                        'retry': true
+                    });
                     msg.error = error;
                 }
             },

src/templates/message.js

@@ -6,6 +6,7 @@ export default (o) => html`
         .chatview=${o.chatview}
         .hats=${o.hats}
         .model=${o.model}
+        ?allow_retry=${o.retry}
         ?correcting=${o.correcting}
         ?editable=${o.editable}
         ?has_mentions=${o.has_mentions}