Replace spin.js with animated gif for updating table rows.

Fixes bug 1035111

Change-Id: Ideccd6090d1ec5fd0830a1468479c3b0edde9800

horizon/static/horizon/js/horizon.tables.js

@@ -61,13 +61,13 @@ horizon.datatables = {
 
             if($new_row.hasClass('status_unknown')) {
               var spinner_elm = $new_row.find("td.status_unknown:last");
-
-              // FIXME(gabriel): This style mucking shouldn't be in the javascript.
-              spinner_elm.css('padding-left', '32px');
-              spinner_elm.spin(horizon.conf.spinner_options.inline);
-
-              $(spinner_elm.data().spinner.el).css('top', '9px');
-              $(spinner_elm.data().spinner.el).css('left', '-15px');
+              // Replacing spin.js here with an animated gif to reduce CPU
+              spinner_elm.prepend(
+                      $("<div />")
+                      .addClass("loading_gif")
+                      .append(
+                          $("<img />")
+                          .attr("src", "/static/dashboard/img/loading.gif")));
             }
 
             // Only replace row if the html content has changed

openstack_dashboard/static/dashboard/less/horizon.less

@@ -1380,3 +1380,12 @@ label.log-length {
 .dropdown_fix {
   overflow: visible;
 }
+
+/* Replaces CPU hungry spin.js with animated gif */
+.loading_gif {
+  width: 35px;
+  height: 13px;
+  padding-top: 2px;
+  padding-right: 5px;
+  float: left;
+}