From 98bb0f7b28dec272eee643ad21a1dc239d33e3f4 Mon Sep 17 00:00:00 2001
From: sahil839 <sahilbatra839@gmail.com>
Date: Thu, 24 Jun 2021 14:52:13 +0530
Subject: [PATCH] settings: Show spinner inside the confirm button for
 confirm_dialog.

We show a spinner inside the button instead of hiding the button
and then showing the spinner in the bottom area. We also disable
the button to avoid repetitive clicking by user.
---
 .../puppeteer_tests/delete-message.ts         |  6 ++---
 static/js/confirm_dialog.js                   | 25 +++++++++++--------
 static/styles/settings.css                    |  3 ++-
 static/templates/confirm_dialog.hbs           |  6 +++--
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/frontend_tests/puppeteer_tests/delete-message.ts b/frontend_tests/puppeteer_tests/delete-message.ts
index 416e079852..0bf12e0331 100644
--- a/frontend_tests/puppeteer_tests/delete-message.ts
+++ b/frontend_tests/puppeteer_tests/delete-message.ts
@@ -20,10 +20,10 @@ async function delete_message_test(page: Page): Promise<void> {
 
     await page.waitForSelector("#confirm_dialog_modal", {visible: true});
     await page.click(".confirm_dialog_yes_button");
-    await page.waitForSelector("#confirm_dialog_spinner .loading_indicator_spinner", {
+    await page.waitForSelector(".confirm_dialog_yes_button .loader", {
         visible: true,
     });
-    await page.waitForSelector(".confirm_dialog_yes_button", {hidden: true});
+    await page.waitForSelector(".confirm_dialog_yes_button span", {hidden: true});
 
     await page.waitForFunction(
         (expected_length: number) => $("#zhome .message_row").length === expected_length,
@@ -32,7 +32,7 @@ async function delete_message_test(page: Page): Promise<void> {
     );
 
     await page.waitForSelector(`#${CSS.escape(last_message_id!)}`, {hidden: true});
-    await page.waitForSelector("#confirm_dialog_spinner .loading_indicator_spinner", {
+    await page.waitForSelector(".confirm_dialog_yes_button .loader", {
         hidden: true,
     });
 }
diff --git a/static/js/confirm_dialog.js b/static/js/confirm_dialog.js
index 84dea50015..ce2d838d30 100644
--- a/static/js/confirm_dialog.js
+++ b/static/js/confirm_dialog.js
@@ -4,7 +4,6 @@ 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";
 
 /*
@@ -37,15 +36,20 @@ import * as overlays from "./overlays";
 */
 
 export function hide_confirm_dialog_spinner() {
-    const spinner = $("#confirm_dialog_spinner");
-    loading.destroy_indicator(spinner);
-    $("#confirm_dialog_modal > div.modal-footer > button").show();
+    $(".confirm_dialog_yes_button .loader").hide();
+    $(".confirm_dialog_yes_button span").show();
+    $(".confirm_dialog_yes_button").prop("disabled", false);
 }
 
 export function show_confirm_dialog_spinner() {
-    const spinner = $("#confirm_dialog_spinner");
-    $("#confirm_dialog_modal > div.modal-footer > button").hide();
-    loading.make_indicator(spinner);
+    $(".confirm_dialog_yes_button .loader").css("display", "inline-block");
+    $(".confirm_dialog_yes_button span").hide();
+    $(".confirm_dialog_yes_button").prop("disabled", true);
+    $(".confirm_dialog_yes_button object").on("load", function () {
+        const doc = this.getSVGDocument();
+        const $svg = $(doc).find("svg");
+        $svg.find("rect").css("fill", "#000");
+    });
 }
 
 export function launch(conf) {
@@ -85,10 +89,11 @@ export function launch(conf) {
     );
     confirm_dialog.find(".confirm_dialog_body").prepend(conf.html_body);
 
+    const yes_button_span = confirm_dialog.find(".confirm_dialog_yes_button span");
+
+    yes_button_span.html(conf.html_yes_button);
+
     const yes_button = confirm_dialog.find(".confirm_dialog_yes_button");
-
-    yes_button.html(conf.html_yes_button);
-
     // Set up handlers.
     yes_button.on("click", () => {
         if (conf.loading_spinner) {
diff --git a/static/styles/settings.css b/static/styles/settings.css
index feea7005aa..eba6e5f76a 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -1581,13 +1581,14 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     margin-top: 10px;
 }
 
-#do_deactivate_self_button .loader {
+.confirm_dialog_yes_button .loader {
     display: none;
     vertical-align: top;
     position: relative;
     height: 30px;
     margin-top: -10px;
     top: 5px;
+    width: 30px;
 }
 
 .dropdown-list-widget {
diff --git a/static/templates/confirm_dialog.hbs b/static/templates/confirm_dialog.hbs
index 7ea82ee6ea..72f0021a9c 100644
--- a/static/templates/confirm_dialog.hbs
+++ b/static/templates/confirm_dialog.hbs
@@ -8,7 +8,9 @@
     </div>
     <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>
+        <button class="button rounded btn-danger confirm_dialog_yes_button">
+            <object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
+            <span></span>
+        </button>
     </div>
 </div>