diff --git a/static/js/message_edit.js b/static/js/message_edit.js
index e7d7e5467f..11f9e4d534 100644
--- a/static/js/message_edit.js
+++ b/static/js/message_edit.js
@@ -192,17 +192,22 @@ export function update_message_topic_editing_pencil() {
 }
 
 export function hide_message_edit_spinner(row) {
-    const spinner = row.find(".message_edit_spinner");
-    loading.destroy_indicator(spinner);
-    $(".message_edit_form .message_edit_save").show();
-    $(".message_edit_form .message_edit_cancel").show();
+    row.find(".loader").hide();
+    row.find(".message_edit_save span").show();
+    row.find(".message_edit_save").removeClass("disable-btn");
+    row.find(".message_edit_cancel").removeClass("disable-btn");
 }
 
 export function show_message_edit_spinner(row) {
-    const spinner = row.find(".message_edit_spinner");
-    loading.make_indicator(spinner);
-    $(".message_edit_form .message_edit_save").hide();
-    $(".message_edit_form .message_edit_cancel").hide();
+    row.find(".loader").css("display", "inline-block");
+    row.find(".message_edit_save span").hide();
+    row.find(".message_edit_save").addClass("disable-btn");
+    row.find(".message_edit_cancel").addClass("disable-btn");
+    row.find("object").on("load", function () {
+        const doc = this.getSVGDocument();
+        const $svg = $(doc).find("svg");
+        $svg.find("rect").css("fill", "#000");
+    });
 }
 
 export function show_topic_edit_spinner(row) {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index a0d7955739..9e22aa1963 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -1470,6 +1470,25 @@ div.focused_table {
     align-items: baseline;
 }
 
+.message_edit_save .loader {
+    display: none;
+    vertical-align: top;
+    position: relative;
+    height: 28px;
+    margin-top: -10px;
+    top: 6px;
+    width: 30px;
+}
+
+.edit-controls {
+    .btn-wrapper {
+        cursor: not-allowed;
+    }
+    .disable-btn {
+        pointer-events: none;
+    }
+}
+
 .topic_edit {
     display: none;
     line-height: 22px;
diff --git a/static/templates/message_edit_form.hbs b/static/templates/message_edit_form.hbs
index 5807959788..bc2aee672c 100644
--- a/static/templates/message_edit_form.hbs
+++ b/static/templates/message_edit_form.hbs
@@ -54,8 +54,15 @@
         <div class="message_edit_spinner"></div>
         <div class="controls edit-controls">
             {{#if is_editable}}
-                <button type="button" class="button small rounded sea-green message_edit_save">{{t "Save" }}</button>
-                <button type="button" class="button small rounded message_edit_cancel">{{t "Cancel" }}</button>
+                <div class="btn-wrapper inline-block">
+                    <button type="button" class="button small rounded sea-green message_edit_save">
+                        <object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
+                        <span>{{t "Save" }}</span>
+                    </button>
+                </div>
+                <div class="btn-wrapper inline-block">
+                    <button type="button" class="button small rounded message_edit_cancel">{{t "Cancel" }}</button>
+                </div>
                 {{#if is_content_editable}}
                 <div class="message-edit-feature-group">
                     {{> compose_control_buttons }}