diff --git a/frontend_tests/casper_tests/04-compose.js b/frontend_tests/casper_tests/04-compose.js
index e0cf6e1ee3..fa23a07952 100644
--- a/frontend_tests/casper_tests/04-compose.js
+++ b/frontend_tests/casper_tests/04-compose.js
@@ -151,7 +151,7 @@ casper.then(function () {
 casper.then(function () {
     casper.waitWhileVisible("#markdown_preview", function () {
         casper.test.assertVisible('#undo_markdown_preview', 'Write button is visible');
-        casper.test.assertEquals(casper.getHTML('#preview_message_area'), "Nothing to preview", "Nothing to preview");
+        casper.test.assertEquals(casper.getHTML('#preview_content'), "Nothing to preview", "Nothing to preview");
         casper.click("#undo_markdown_preview");
     });
 });
@@ -160,7 +160,7 @@ casper.then(function () {
     casper.waitWhileVisible("#undo_markdown_preview", function () {
         casper.test.assertVisible('#markdown_preview', 'Preview button is visible.');
         casper.test.assertNotVisible('#undo_markdown_preview', 'Write button is hidden.');
-        casper.test.assertEquals(casper.getHTML('#preview_message_area'), "", "Markdown preview area is empty");
+        casper.test.assertEquals(casper.getHTML('#preview_content'), "", "Markdown preview area is empty");
 
         casper.fill('form[action^="/json/messages"]', {
             content: '**Markdown Preview** >> Test for markdown preview'
@@ -172,7 +172,7 @@ casper.then(function () {
 
 casper.then(function () {
     casper.waitWhileVisible("#markdown_preview", function () {
-        casper.test.assertEquals(casper.getHTML('#preview_message_area'), "<p><strong>Markdown Preview</strong> &gt;&gt; Test for markdown preview</p>", "Check markdown is previewed properly");
+        casper.test.assertEquals(casper.getHTML('#preview_content'), "<p><strong>Markdown Preview</strong> &gt;&gt; Test for markdown preview</p>", "Check markdown is previewed properly");
     });
 });
 
diff --git a/static/js/compose.js b/static/js/compose.js
index eea4c5aebf..0ee6ccefaf 100644
--- a/static/js/compose.js
+++ b/static/js/compose.js
@@ -133,7 +133,7 @@ function clear_preview_area () {
     $("#new_message_content").show();
     $("#undo_markdown_preview").hide();
     $("#preview_message_area").hide();
-    $("#preview_message_area").empty();
+    $("#preview_content").empty();
     $("#markdown_preview").show();
 }
 
@@ -1010,10 +1010,11 @@ $(function () {
         $("#preview_message_area").show();
 
         if (message.length === 0) {
-            $("#preview_message_area").html(i18n.t("Nothing to preview"));
+            $("#preview_content").html(i18n.t("Nothing to preview"));
         } else {
             if (echo.contains_bugdown(message))  {
-                $("#preview_message_area").html(i18n.t("Loading preview..."));
+                var spinner = $("#markdown_preview_spinner").expectOne();
+                loading.make_indicator(spinner);
             } else {
                 // For messages that don't appear to contain
                 // bugdown-specific syntax not present in our
@@ -1022,17 +1023,23 @@ $(function () {
                 // render server-side to ensure the preview is
                 // accurate; if the `echo.contains_bugdown` logic is
                 // incorrect wrong, users will see a brief flicker).
-                $("#preview_message_area").html(echo.apply_markdown(message));
+                $("#preview_content").html(echo.apply_markdown(message));
             }
             channel.get({
                 url: '/json/messages/render',
                 idempotent: true,
                 data: {content: message},
                 success: function (response_data) {
-                    $("#preview_message_area").html(response_data.rendered);
+                    if (echo.contains_bugdown(message)) {
+                        loading.destroy_indicator($("#markdown_preview_spinner"));
+                    }
+                    $("#preview_content").html(response_data.rendered);
                 },
                 error: function () {
-                    $("#preview_message_area").html(i18n.t("Failed to generate preview"));
+                    if (echo.contains_bugdown(message)) {
+                        loading.destroy_indicator($("#markdown_preview_spinner"));
+                    }
+                    $("#preview_content").html(i18n.t("Failed to generate preview"));
                 }
             });
         }
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 3605702fee..1ed7ec4de5 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -3685,3 +3685,7 @@ a#undo_markdown_preview {
     font-size: 16px;
     color: #777;
 }
+
+#markdown_preview_spinner {
+    margin: auto;
+}
diff --git a/templates/zerver/compose.html b/templates/zerver/compose.html
index b427390872..82359951f5 100644
--- a/templates/zerver/compose.html
+++ b/templates/zerver/compose.html
@@ -70,7 +70,10 @@
               <td class="messagebox" colspan="2">
                 <textarea class="new_message_textarea" name="content" id="new_message_content"
                           value="" placeholder="{{ _('Compose your message here') }}..." tabindex="140" maxlength="10000"></textarea>
-                <div class="scrolling_list" id="preview_message_area" style="display:none;"></div>
+                <div class="scrolling_list" id="preview_message_area" style="display:none;">
+                  <div id="markdown_preview_spinner"></div>
+                  <div id="preview_content"></div>
+                </div>
                 <div id="below-compose-content">
                   <input type="file" id="file_input" class="notvisible pull-left" multiple />
                   <a class="message-control-button icon-vector-dropbox notdisplayed"