Append spinner when fetching newer messages

src/converse-chatview.js

@@ -294,7 +294,8 @@
                                 unread_msgs: __('You have unread messages')
                             }
                         ));
-                    this.$content = this.$el.find('.chat-content');
+                    this.content = this.el.querySelector('.chat-content');
+                    this.$content = $(this.content);
                     return this;
                 },
 
@@ -360,20 +361,26 @@
                     if (!permanent) {
                         $el.addClass('chat-event');
                     }
-                    this.$content.append($el);
+                    this.content.insertAdjacentElement('beforeend', $el[0]);
                     this.scrollDown();
                 },
 
-                addSpinner () {
+                addSpinner (append=false) {
                     if (_.isNull(this.el.querySelector('.spinner'))) {
-                        this.$content.prepend(tpl_spinner);
+                        if (append) {
+                            this.content.insertAdjacentHTML('beforeend', tpl_spinner());
+                            this.scrollDown();
+                        } else {
+                            this.content.insertAdjacentHTML('afterbegin', tpl_spinner());
+                        }
                     }
                 },
 
                 clearSpinner () {
-                    if (this.$content.children(':first').is('span.spinner')) {
-                        this.$content.children(':first').remove();
-                    }
+                    _.each(
+                        this.content.querySelectorAll('span.spinner'),
+                        (el) => el.parentNode.removeChild(el)
+                    );
                 },
 
                 insertDayIndicator (date, prepend) {

src/converse-mam.js

@@ -61,8 +61,7 @@
                      */
                     if (this.disable_mam) { return; }
                     const { _converse } = this.__super__;
-                    this.addSpinner();
-
+                    this.addSpinner(true);
                     _converse.api.disco.supports(Strophe.NS.MAM, _converse.bare_jid).then(
                         (result) => { // Success
                             if (result.supported) {

src/converse-muc.js

@@ -489,7 +489,8 @@
                                 }))
                             .append(this.occupantsview.$el);
                         this.renderToolbar(tpl_chatroom_toolbar);
-                        this.$content = this.$el.find('.chat-content');
+                        this.content = this.el.querySelector('.chat-content');
+                        this.$content = $(this.content);
                     }
                     this.toggleOccupants(null, true);
                     return this;