confirm_dialog: Add support for loading spinner.

static/js/confirm_dialog.js

@@ -4,6 +4,7 @@ import render_confirm_dialog from "../templates/confirm_dialog.hbs";
 import render_confirm_dialog_heading from "../templates/confirm_dialog_heading.hbs";
 
 import * as blueslip from "./blueslip";
+import * as loading from "./loading";
 import * as overlays from "./overlays";
 
 /*
@@ -29,8 +30,23 @@ import * as overlays from "./overlays";
            only ever have one confirm dialog active at any
            time.
 
+        6) If a modal wants a loading spinner, it should pass loading_spinner: true
+           and manage the spinner via calling the functions hide_confirm_dialog_spinner
+           and show_confirm_dialog_spinner via its callback hooks.
 */
 
+export function hide_confirm_dialog_spinner() {
+    const spinner = $("#confirm_dialog_spinner");
+    loading.destroy_indicator(spinner);
+    $("#confirm_dialog_modal > div.modal-footer > button").show();
+}
+
+export function show_confirm_dialog_spinner() {
+    const spinner = $("#confirm_dialog_spinner");
+    $("#confirm_dialog_modal > div.modal-footer > button").hide();
+    loading.make_indicator(spinner);
+}
+
 export function launch(conf) {
     const html = render_confirm_dialog({fade: conf.fade});
     const confirm_dialog = $(html);
@@ -74,7 +90,11 @@ export function launch(conf) {
 
     // Set up handlers.
     yes_button.on("click", () => {
-        overlays.close_modal("#confirm_dialog_modal");
+        if (conf.loading_spinner) {
+            show_confirm_dialog_spinner();
+        } else {
+            overlays.close_modal("#confirm_dialog_modal");
+        }
         conf.on_click();
     });
 

static/styles/zulip.css

@@ -2342,7 +2342,7 @@ div.topic_edit_spinner .loading_indicator_spinner {
 }
 
 .topic_move_spinner,
-#do_delete_message_spinner {
+#confirm_dialog_spinner {
     margin: 0 auto;
 }
 

static/templates/confirm_dialog.hbs

@@ -8,5 +8,6 @@
     <div class="modal-footer">
         <button class="button rounded close-modal-btn" data-dismiss="modal">{{t "Cancel" }}</button>
         <button class="button rounded btn-danger confirm_dialog_yes_button"></button>
+        <div id="confirm_dialog_spinner"></div>
     </div>
 </div>