Add an animated spinner when generating a private key.

converse.css

@@ -333,7 +333,6 @@ you can use the generic selector below, but it's slower:
 
 span.spinner {
     background: url(images/spinner.gif) no-repeat center;
-    width: 22px;
     height: 22px;
     padding: 0 2px 0 2px;
     display: block;
@@ -1166,6 +1165,7 @@ ul.chat-toolbar li {
     list-style: none;
     padding: 0 3px 0 3px;
     cursor: pointer; 
+    margin-top: 1px;
 }
 
 ul.chat-toolbar li:hover {

converse.js

@@ -554,8 +554,12 @@
 
                 // We need to generate a new key and instance tag
                 instance_tag = OTR.makeInstanceTag();
-                this.trigger('showHelpMessages', [__('Generating private key.')]);
-                this.trigger('showHelpMessages', [__('Your browser might become unresponsive.')]);
+                this.trigger('showHelpMessages', [
+                    __('Generating private key.'),
+                    __('Your browser might become unresponsive.')],
+                    null,
+                    true // show spinner
+                );
 
                 var clb = callback;
                 setTimeout($.proxy(function () {
@@ -568,7 +572,7 @@
                         window.sessionStorage[hex_sha1(this.id+'instance_tag')] = instance_tag;
                             this.save({'pass_check': cipher.encrypt(CryptoJS.algo.AES, 'match', pass).toString()});
                     }
-                    this.trigger('showHelpMessages', [__('Private key generated.')]);
+                    this.trigger('showHelpMessages', [__('Private key generated.')], null, false);
                     clb({
                         'key': key,
                         'instance_tag': instance_tag
@@ -712,23 +716,22 @@
                 if ((!text) || (!converse.allow_otr)) {
                     return this.createMessage(message);
                 }
-                if (_.contains([UNVERIFIED, VERIFIED], this.get('otr_status'))) {
-                    if (text.match(/^\?OTRv23?/)) {
-                        this.initiateOTR(text);
-                    } else {
-                        this.otr.receiveMsg(text);
-                    }
+                if (text.match(/^\?OTRv23?/)) {
+                    this.initiateOTR(text);
                 } else {
-                    if (text.match(/^\?OTR/)) {
-                        // They want to initiate OTR
-                        if (!this.otr) {
-                            this.initiateOTR(text);
+                    if (_.contains([UNVERIFIED, VERIFIED], this.get('otr_status'))) {
+                        this.otr.receiveMsg(text);
+                    } else {
+                        if (text.match(/^\?OTR/)) {
+                            if (!this.otr) {
+                                this.initiateOTR(text);
+                            } else {
+                                this.otr.receiveMsg(text);
+                            }
                         } else {
-                            this.otr.receiveMsg(text);
+                            // Normal unencrypted message.
+                            this.createMessage(message);
                         }
-                    } else {
-                        // Normal unencrypted message.
-                        this.createMessage(message);
                     }
                 }
             }
@@ -960,12 +963,17 @@
                 return this.scrollDown();
             },
 
-            showHelpMessages: function (msgs, type) {
+            showHelpMessages: function (msgs, type, spinner) {
                 var $chat_content = this.$el.find('.chat-content'), i,
                     msgs_length = msgs.length;
                 for (i=0; i<msgs_length; i++) {
                     $chat_content.append($('<div class="chat-'+(type||'info')+'">'+msgs[i]+'</div>'));
                 }
+                if (spinner === true) {
+                    $chat_content.append('<span class="spinner"/>');
+                } else if (spinner === false) {
+                    $chat_content.find('span.spinner').remove();
+                }
                 return this.scrollDown();
             },