settings: Add loading indicator for account deactivation.

Fixes #8175.

static/js/settings_account.js

@@ -259,16 +259,27 @@ exports.set_up = function () {
     });
 
     $("#do_deactivate_self_button").on('click',function () {
-        $("#deactivate_self_modal").modal("hide");
+        $("#do_deactivate_self_button .loader").css('display', 'inline-block');
-        channel.del({
+        $("#do_deactivate_self_button span").hide();
-            url: '/json/users/me',
+        $("#do_deactivate_self_button object").on("load", function () {
-            success: function () {
+            var doc = this.getSVGDocument();
-                window.location.href = "/login";
+            var $svg = $(doc).find("svg");
-            },
+            $svg.find("rect").css("fill", "#000");
-            error: function (xhr) {
-                ui_report.error(i18n.t("Error deactivating account"), xhr, $('#account-settings-status').expectOne());
-            },
         });
+
+        setTimeout(function () {
+            channel.del({
+                url: '/json/users/me',
+                success: function () {
+                    $("#deactivate_self_modal").modal("hide");
+                    window.location.href = "/login";
+                },
+                error: function (xhr) {
+                    $("#deactivate_self_modal").modal("hide");
+                    ui_report.error(i18n.t("Error deactivating account"), xhr, $('#account-settings-status').expectOne());
+                },
+            });
+        }, 5000);
     });
 
 

static/styles/settings.css

@@ -1150,6 +1150,15 @@ input[type=checkbox].inline-block {
     border-radius: 0px;
 }
 
+#do_deactivate_self_button .loader {
+    display: none;
+    vertical-align: top;
+    position: relative;
+    height: 30px;
+    margin-top: -10px;
+    top: 5px;
+}
+
 #id_realm_notifications_stream .dropdown-search > input[type=text],
 #id_realm_signup_notifications_stream .dropdown-search > input[type=text] {
     margin: 9px;

static/templates/settings/account-settings.handlebars

@@ -158,7 +158,10 @@
             </div>
             <div class="modal-footer">
                 <button class="button" data-dismiss="modal">{{t "Cancel" }}</button>
-                <button class="button btn-danger rounded" id="do_deactivate_self_button">{{t "Deactivate now" }}</button>
+                <button class="button btn-danger rounded" id="do_deactivate_self_button">
+                    <object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
+                    <span>{{t "Deactivate now" }}</span>
+                </button>
             </div>
         </div>