css: Improve the dialog_widget loading spinner visuals.

Previously, when you clicked the confirmation button in a
dialog_widget, we'd display a loading spinner on top of an ugly grey
button background.

Remove the ugly grey background color, while making sure the loading
spinner inside the button looks good and doesn't resize the button.

Fixes: #22002

static/js/dialog_widget.js

@@ -56,7 +56,12 @@ export function show_dialog_spinner() {
     $("#dialog_widget_modal .modal__btn").prop("disabled", true);
 
     const $spinner = $("#dialog_widget_modal .modal__spinner");
-    loading.make_indicator($spinner);
+    const dialog_submit_button_span_width = $(".dialog_submit_button span").width();
+    const dialog_submit_button_span_height = $(".dialog_submit_button span").height();
+    loading.make_indicator($spinner, {
+        width: dialog_submit_button_span_width,
+        height: dialog_submit_button_span_height,
+    });
 }
 
 // Supports a callback to be called once the modal finishes closing.

static/js/loading.ts

@@ -4,7 +4,12 @@ import render_loader from "../templates/loader.hbs";
 
 export function make_indicator(
     $outer_container: JQuery,
-    {abs_positioned = false, text}: {abs_positioned?: boolean; text?: string} = {},
+    {
+        abs_positioned = false,
+        text,
+        width,
+        height,
+    }: {abs_positioned?: boolean; text?: string; width?: number; height?: number} = {},
 ): void {
     let $container = $outer_container;
 
@@ -48,7 +53,16 @@ export function make_indicator(
 
     // These width calculations are tied to the spinner width and
     // margins defined via CSS
-    $container.css({width: 38 + text_width, height: 0});
+    if (width !== undefined) {
+        $container.css({width: width + text_width});
+    } else {
+        $container.css({width: 38 + text_width});
+    }
+    if (height !== undefined) {
+        $container.css({height});
+    } else {
+        $container.css({height: 0});
+    }
 
     $outer_container.data("destroying", false);
 }

static/styles/modal.css

@@ -95,7 +95,6 @@
     transition: transform 0.25s ease-out;
 
     &:disabled {
-        background-color: hsl(0, 0%, 83%);
         cursor: not-allowed;
     }
 }
@@ -286,3 +285,8 @@
         fill: hsl(0, 0%, 100%);
     }
 }
+
+.modal__spinner {
+    display: flex;
+    justify-content: center;
+}