Show spinner when fetching messages by scrolling upwards

src/converse-mam-views.js

@@ -33,21 +33,23 @@ converse.plugins.add('converse-mam-views', {
                 return result;
             },
 
-            onScroll (ev) {
+            async onScroll (ev) {
                 const { _converse } = this.__super__;
                 if (this.content.scrollTop === 0 && this.model.messages.length) {
-                    const oldest_message = this.model.messages.at(0);
+                    const oldest_message = this.model.getOldestMessage();
                     const by_jid = this.model.get('jid');
-                    const stanza_id = oldest_message.get(`stanza_id ${by_jid}`);
+                    const stanza_id = oldest_message && oldest_message.get(`stanza_id ${by_jid}`);
+                    this.addSpinner();
                     if (stanza_id) {
-                        this.model.fetchArchivedMessages({
+                        await this.model.fetchArchivedMessages({
                             'before': stanza_id
                         });
                     } else {
-                        this.model.fetchArchivedMessages({
+                        await this.model.fetchArchivedMessages({
                             'end': oldest_message.get('time')
                         });
                     }
+                    this.clearSpinner();
                 }
             }
         },

src/headless/converse-chatboxes.js

@@ -395,8 +395,18 @@ converse.plugins.add('converse-chatboxes', {
                 }
             },
 
+            getOldestMessage () {
+                for (let i=0; i<this.messages.length; i++) {
+                    const message = this.messages.at(i);
+                    if (message.get('type') === this.get('message_type')) {
+                        return message;
+                    }
+                }
+            },
+
+
             getMostRecentMessage () {
-                for (var i=this.messages.length-1; i>=0; i--) {
+                for (let i=this.messages.length-1; i>=0; i--) {
                     const message = this.messages.at(i);
                     if (message.get('type') === this.get('message_type')) {
                         return message;