Make spinner into a template

css/converse.css

@@ -1352,7 +1352,7 @@
     text-align: center;
     display: block;
     margin: 0;
-    padding: 50% 0; }
+    padding: 10% 0; }
   #converse-embedded-chat .hor_centered,
   #conversejs .hor_centered {
     text-align: center;

css/inverse.css

@@ -1352,7 +1352,7 @@
     text-align: center;
     display: block;
     margin: 0;
-    padding: 50% 0; }
+    padding: 10% 0; }
   #converse-embedded-chat .hor_centered,
   #conversejs .hor_centered {
     text-align: center;

sass/_core.scss

@@ -135,7 +135,7 @@
         text-align: center;
         display: block;
         margin: 0;
-        padding: 50% 0;
+        padding: 10% 0;
     }
     .hor_centered {
         text-align: center;

src/converse-chatview.js

@@ -15,7 +15,8 @@
             "tpl!message",
             "tpl!help_message",
             "tpl!toolbar",
-            "tpl!avatar"
+            "tpl!avatar",
+            "tpl!spinner"
     ], factory);
 }(this, function (
             converse,
@@ -25,7 +26,8 @@
             tpl_message,
             tpl_help_message,
             tpl_toolbar,
-            tpl_avatar
+            tpl_avatar,
+            tpl_spinner
     ) {
     "use strict";
     var $ = converse.env.jQuery,
@@ -196,7 +198,7 @@
 
                 addSpinner: function () {
                     if (_.isNull(this.el.querySelector('.spinner'))) {
-                        this.$content.prepend('<span class="spinner"/>');
+                        this.$content.prepend(tpl_spinner);
                     }
                 },
 
@@ -385,7 +387,7 @@
                         })));
                     }
                     if (spinner === true) {
-                        this.$content.append('<span class="spinner"/>');
+                        this.$content.append(tpl_spinner);
                     } else if (spinner === false) {
                         this.$content.find('span.spinner').remove();
                     }

src/converse-muc.js

@@ -29,6 +29,7 @@
             "tpl!room_description",
             "tpl!room_item",
             "tpl!room_panel",
+            "tpl!spinner",
             "awesomplete",
             "converse-chatview"
     ], factory);
@@ -51,6 +52,7 @@
             tpl_room_description,
             tpl_room_item,
             tpl_room_panel,
+            tpl_spinner,
             Awesomplete
     ) {
 
@@ -401,7 +403,7 @@
                     if (_.isNull(body)) {
                         return; // The message has no text
                     }
-                    if (this.isNewMessage(stanza) && this.newMessageWillBeHidden()) {
+                    if (utils.isNewMessage(stanza) && this.newMessageWillBeHidden()) {
                         this.save({'num_unread_general': this.get('num_unread_general') + 1});
                         if (this.isUserMentioned(body.textContent)) {
                             this.save({'num_unread': this.get('num_unread') + 1});
@@ -1537,7 +1539,7 @@
                         nick_el.classList.remove('error');
                     }
                     this.$el.find('.chatroom-form-container')
-                            .replaceWith('<span class="spinner centered"/>');
+                        .replaceWith(tpl_spinner);
                     this.join(nick);
                 },
 
@@ -1651,7 +1653,7 @@
                 submitPassword: function (ev) {
                     ev.preventDefault();
                     var password = this.$el.find('.chatroom-form').find('input[type=password]').val();
-                    this.$el.find('.chatroom-form-container').replaceWith('<span class="spinner centered"/>');
+                    this.$el.find('.chatroom-form-container').replaceWith(tpl_spinner);
                     this.join(this.model.get('nick'), password);
                 },
 
@@ -1895,7 +1897,7 @@
 
                 showSpinner: function () {
                     this.$('.chatroom-body').children().addClass('hidden');
-                    this.$el.find('.chatroom-body').prepend('<span class="spinner centered"/>');
+                    this.$el.find('.chatroom-body').prepend(tpl_spinner);
                 },
 
                 hideSpinner: function () {
@@ -2503,7 +2505,7 @@
                     this.$el.find('input.new-chatroom-name').removeClass('error');
                     $server.removeClass('error');
                     $available_chatrooms.empty();
-                    $('input#show-rooms').hide().after('<span class="spinner"/>');
+                    $('input#show-rooms').hide().after(tpl_spinner);
                     this.model.save({muc_domain: server});
                     this.updateRoomsList();
                 },
@@ -2564,7 +2566,7 @@
                         $div.remove();
                     } else {
                         $parent.find('span.spinner').remove();
-                        $parent.append('<span class="spinner hor_centered"/>');
+                        $parent.append(tpl_spinner);
                         _converse.connection.disco.info(
                             $(target).attr('data-room-jid'), null, _.partial(this.insertRoomInfo, $parent[0])
                         );

src/converse-register.js

@@ -16,6 +16,7 @@
             "tpl!register_tab",
             "tpl!registration_form",
             "tpl!registration_request",
+            "tpl!spinner",
             "converse-controlbox"
     ], factory);
 }(this, function (
@@ -24,7 +25,9 @@
             tpl_register_panel,
             tpl_register_tab,
             tpl_registration_form,
-            tpl_registration_request) {
+            tpl_registration_request,
+            tpl_spinner
+        ) {
 
     "use strict";
 
@@ -316,7 +319,7 @@
                         _converse.connection.reset();
                         that = this;
                         this.$('form').hide(function () {
-                            $(this).replaceWith('<span class="spinner centered"/>');
+                            $(this).replaceWith(tpl_spinner);
                             if (that.fields.password && that.fields.username) {
                                 // automatically log the user in
                                 _converse.connection.connect(

src/templates/spinner.html

+<span class="spinner centered"/>