messages: Add loading spinner for deleting messages.

User was able to click delete button multiple time which could cause
multiple delete requests. This commit disables and hides the delete
message button after the first click and shows a spinner until http
the delete request responds.

Also adds a casperjs test to ensure that spinner becomes visible and
delete button becomes invisible after clicking on delete button for
first time and hides spinner and show delete buttton when message is
deleted.

Fixes: #11219.

frontend_tests/casper_tests/15-delete-message.js

@@ -27,6 +27,10 @@ casper.then(function () {
         casper.click('#do_delete_message_button');
     });
 });
+casper.then(function () {
+    casper.test.assertVisible("#do_delete_message_spinner .loading_indicator_spinner");
+    casper.test.assertNotVisible("#do_delete_message_button");
+});
 
 casper.then(function () {
     casper.waitFor(function check_length() {
@@ -38,6 +42,7 @@ casper.then(function () {
 
 casper.then(function () {
     casper.test.assertDoesntExist(last_message_id);
+    casper.test.assertNotVisible("#do_delete_message_spinner .loading_indicator_spinner");
 });
 
 casper.run(function () {

static/js/message_edit.js

@@ -1,6 +1,7 @@
 var message_edit = (function () {
 var exports = {};
 var currently_editing_messages = {};
+var currently_deleting_messages = [];
 
 var editability_types = {
     NO: 1,
@@ -592,18 +593,46 @@ exports.show_history = function (message) {
     });
 };
 
+function hide_delete_btn_show_spinner(deleting) {
+    if (deleting) {
+        $('do_delete_message_button').attr('disabled', 'disabled');
+        $('#delete_message_modal > div.modal-footer > button').hide();
+        var delete_spinner = $("#do_delete_message_spinner");
+        loading.make_indicator(delete_spinner, { abs_positioned: true });
+    } else {
+        loading.destroy_indicator($("#do_delete_message_spinner"));
+        $("#do_delete_message_button").prop('disabled', false);
+        $('#delete_message_modal > div.modal-footer > button').show();
+    }
+}
+
 exports.delete_message = function (msg_id) {
     $("#delete-message-error").html('');
     $('#delete_message_modal').modal("show");
+    if (_.contains(currently_deleting_messages, msg_id)) {
+        hide_delete_btn_show_spinner(true);
+    } else {
+        hide_delete_btn_show_spinner(false);
+    }
     $('#do_delete_message_button').off().on('click', function (e) {
         e.stopPropagation();
         e.preventDefault();
+        currently_deleting_messages.push(msg_id);
+        hide_delete_btn_show_spinner(true);
         channel.del({
             url: "/json/messages/" + msg_id,
             success: function () {
                 $('#delete_message_modal').modal("hide");
+                currently_deleting_messages = _.reject(currently_deleting_messages, function (id) {
+                    return id === msg_id;
+                });
+                hide_delete_btn_show_spinner(false);
             },
             error: function (xhr) {
+                currently_deleting_messages = _.reject(currently_deleting_messages, function (id) {
+                    return id === msg_id;
+                });
+                hide_delete_btn_show_spinner(false);
                 ui_report.error(i18n.t("Error deleting message"), xhr,
                                 $("#delete-message-error"));
             },

static/styles/zulip.scss

@@ -2456,6 +2456,12 @@ div.topic_edit_spinner .loading_indicator_spinner {
     height: 14px;
 }
 
+#do_delete_message_spinner {
+    display: none;
+    width: 0;
+    margin: 0 auto;
+}
+
 .modal {
     overflow: hidden;
     margin-top: 0;

templates/zerver/app/delete_message.html

@@ -12,5 +12,6 @@
     <div class="modal-footer">
         <button class="button rounded" data-dismiss="modal">{{ _("Cancel") }}</button>
         <button class="button rounded btn-danger" id="do_delete_message_button">{{ _("Yes, delete this message") }}</button>
+        <div id="do_delete_message_spinner"></div>
     </div>
 </div>