Fix positioning of loading icon

common/lib/capa/capa/templates/formulaequationinput.html

@@ -30,8 +30,8 @@
       </p>
 
       <div id="input_${id}_preview" class="equation">
-        <img src="/static/css/vendor/indicator.gif" style="float:left" class="loading"/>
         \[\]
+        <img src="/static/images/spinner.gif" class="loading"/>
       </div>
   <p id="answer_${id}" class="answer"></p>
 

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -214,6 +214,16 @@ section.problem {
       clear: both;
       margin-top: 3px;
 
+      .MathJax_Display {
+        display: inline-block;
+        width: auto;
+      }
+
+      img.loading {
+        display: inline-block;
+        padding-left: 10px;
+      }
+
       span {
         margin-bottom: 0;
 

common/static/js/capa/formula_equation_preview.js

@@ -34,7 +34,7 @@
         }
 
         // Show the loading icon.
-        data.$loading.show();
+        data.$loading.css('visibility', 'visible');
     }
 
     function send_request() {
@@ -80,7 +80,7 @@
             */
             if (response.request_start == data.last_sent &&
                 data.timeout_id === null) {
-                data.$loading.hide();  // Disable icon
+                data.$loading.css('visibility', 'hidden');  // Disable icon
             }
 
             if (response.request_start <= data.request_visible) {
@@ -113,7 +113,7 @@
         var prev_id = "#" + this.id + "_preview";
         preview_data[this.id] = {
             $preview: $(prev_id),
-            $loading: $(prev_id + " img.loading").hide(),
+            $loading: $(prev_id + " img.loading"),
             last_sent: 0,  // The time of the one that was last sent
             request_visible: 0,  // The original time of the visible request
             timeout_id: null  // If there is a timeout, store its ID here