buttons: Add loading indicator to buttons.

tools/test-js-with-node

@@ -64,6 +64,7 @@ EXEMPT_FILES = make_set(
         "web/src/bootstrap_typeahead.ts",
         "web/src/browser_history.ts",
         "web/src/buddy_list.ts",
+        "web/src/buttons.ts",
         "web/src/click_handlers.ts",
         "web/src/color_picker_popover.ts",
         "web/src/compose.js",

web/src/buttons.ts

@@ -0,0 +1,34 @@
+import $ from "jquery";
+
+import * as loading from "./loading.ts";
+
+export function show_button_loading_indicator($button: JQuery): void {
+    // If the button already has a loading indicator, do nothing.
+    if ($button.find(".button-loading-indicator").length > 0) {
+        return;
+    }
+    // First, we disable the button and hide its contents.
+    $button.prop("disabled", true);
+    $button.find(".zulip-icon").css("visibility", "hidden");
+    $button.find(".action-button-label").css("visibility", "hidden");
+    // Next, we create a loading indicator with a unique id.
+    // The unique id is required for the `filter` element in the loader SVG,
+    // to prevent the loading indicator from being hidden due to duplicate ids.
+    // Reference commit: 995d073dbfd8f22a2ef50c1320e3b1492fd28649
+    const loading_indicator_unique_id = `button-loading-indicator-${Date.now()}`;
+    const $button_loading_indicator = $("<span>")
+        .attr("id", loading_indicator_unique_id)
+        .addClass("button-loading-indicator");
+    $button.append($button_loading_indicator);
+    loading.make_indicator($button_loading_indicator, {
+        width: $button.width(),
+        height: $button.height(),
+    });
+}
+
+export function hide_button_loading_indicator($button: JQuery): void {
+    $button.find(".button-loading-indicator").remove();
+    $button.prop("disabled", false);
+    $button.find(".zulip-icon").css("visibility", "visible");
+    $button.find(".action-button-label").css("visibility", "visible");
+}

web/styles/buttons.css

@@ -1,4 +1,5 @@
 .action-button {
+    position: relative;
     display: flex;
     gap: 0.75ch;
     justify-content: center;
@@ -381,6 +382,7 @@
 .icon-button {
     /* This class should always be used with an icon-button-* class
        defining the color scheme of the button, defined below. */
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -584,3 +586,24 @@
         }
     }
 }
+
+.button-loading-indicator {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .loading_indicator_spinner {
+        /* Override standard values defined
+           in web/styles/app_components.css */
+        height: 100%;
+        width: unset;
+        aspect-ratio: 1;
+
+        & path {
+            /* Set the loading indicator color
+               to the font color of the button. */
+            fill: currentcolor;
+        }
+    }
+}