From dfdb8375de25e564fc0ffd71f9f239e9a95e6ce1 Mon Sep 17 00:00:00 2001
From: Tres Henry <tres@treshenry.net>
Date: Thu, 9 Aug 2012 15:14:03 -0700
Subject: [PATCH] Replace spin.js with animated gif for updating table rows.

Fixes bug 1035111

Change-Id: Ideccd6090d1ec5fd0830a1468479c3b0edde9800
---
 horizon/static/horizon/js/horizon.tables.js   |  14 +-
 .../static/dashboard/img/loading.gif          | Bin 0 -> 2947 bytes
 .../static/dashboard/less/horizon.less        | 125 ++++++++++--------
 3 files changed, 74 insertions(+), 65 deletions(-)
 create mode 100644 openstack_dashboard/static/dashboard/img/loading.gif

diff --git a/horizon/static/horizon/js/horizon.tables.js b/horizon/static/horizon/js/horizon.tables.js
index 5d6849b48..f09be9bd3 100644
--- a/horizon/static/horizon/js/horizon.tables.js
+++ b/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
diff --git a/openstack_dashboard/static/dashboard/img/loading.gif b/openstack_dashboard/static/dashboard/img/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3890f094786626af479c12475596880ecb80e8de
GIT binary patch
literal 2947
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
W<h2UtaaGrYh~+Pyza)g%t@|ATfRDle

literal 0
HcmV?d00001

diff --git a/openstack_dashboard/static/dashboard/less/horizon.less b/openstack_dashboard/static/dashboard/less/horizon.less
index 87f559459..4351fcf44 100644
--- a/openstack_dashboard/static/dashboard/less/horizon.less
+++ b/openstack_dashboard/static/dashboard/less/horizon.less
@@ -1240,105 +1240,105 @@ label.log-length {
 
 /* Project Membership UI */
 .project_membership {
-    min-height: 200px;
+  min-height: 200px;
 
     /* Buttons */
-    .btn-group {
-	margin-left:0px;
+  .btn-group {
+    margin-left:0px;
 	padding: 2px 10px 0 0;
 	margin-bottom: 0px;
 	border: 1px solid #DDD;
 	border-bottom: none;
-    }
-    .btn-group:last-child {
+  }
+  .btn-group:last-child {
 	border-bottom: 1px solid #DDD;
-    }
-    .btn-group:nth-child(odd) {
+  }
+  .btn-group:nth-child(odd) {
 	background-color: #F9F9F9;
-    }
-    .btn-group .active {
+  }
+  .btn-group .active {
 	float: right;
-    }
-    a.btn-primary:hover {
+  }
+  a.btn-primary:hover {
 	background-color: #04C;
-    }
+  }
 
-    /* Header */
-    .help_text {
+  /* Header */
+  .help_text {
 	margin-left: 15px;
 	margin-bottom: 15px;
-    }
-    .users_title {
+  }
+  .users_title {
 	color: #555;
 	font-weight: bold;
 	padding-left: 10px;
 	float: left;
-    }
-    input {
+  }
+  input {
 	background: url(/static/dashboard/img/search.png) no-repeat 105px 5px whiteSmoke;
-    }
-    .fake_table_header {
+  }
+  .fake_table_header {
 	background-color: #F1F1F1;
 	width: 306px;
 	height: 38px;
 	padding-top: 15px;
 	border: 1px solid #DDD;
 	border-bottom: none;
-    }
+  }
 
     /* 'Fake table' body */
-    .fake_table {
+  .fake_table {
 	margin-left: 5px;
 	width: 315px;
 	ul.no_results {
-	    width: 298px;
+      width: 298px;
 	}
 	ul.btn-group:hover {
 	    background-color: #DDD;
 	}
-    }
-    .left {
+  }
+  .left {
 	.fake_table_header {
-	    width: 318px;
+      width: 318px;
 	}
-    }
-    .right {
+  }
+  .right {
 	.fake_table_header {
-	    width: 318px;
-	    margin-left: -15px;
+      width: 318px;
+      margin-left: -15px;
 	}
 	.fake_table ul.no_results {
-	    margin-left: -20px;
+      margin-left: -20px;
 	}
-    }
+  }
 
-    /* User lists */
-    .member {
+  /* User lists */
+  .member {
 	padding: 10px;
 	text-align: left;
-      }
-    .project_members {
+  }
+  .project_members {
 	margin-left: -20px;
-    }
-    .project_members ul.btn-group,
-    .available_users ul.btn-group {
+  }
+  .project_members ul.btn-group,
+  .available_users ul.btn-group {
 	width: 308px;
-    }
+  }
 
-    /* List filtering */
-    .filter {
+  /* List filtering */
+  .filter {
 	width: 120px;
 	margin: -5px 13px 15px 0px;
 	float: right;
-    }
-    .no_results {
+  }
+  .no_results {
 	border: 1px solid #DDD;
 	padding: 10px;
 	color: #08C;
-    }
+  }
 
-    /* Role dropdown menus */
-    .role_dropdown li {
+  /* Role dropdown menus */
+  .role_dropdown li {
 	cursor: pointer;
 	background: none;
 	float: none;
@@ -1356,27 +1356,36 @@ label.log-length {
 	&:hover {
 	  background-color: #CDCDCD;
 	}
-      }
-      .nav .role_options {
-	  float: right;
-	  padding-right: 5px;
-      }
+  }
+  .nav .role_options {
+    float: right;
+    padding-right: 5px;
+  }
 }
 
 /* Inline user creation */
 .add_user_btn {
-    display: inline;
+  display: inline;
 }
 #add_user {
-    clear: both;
+  clear: both;
 }
 .add_user {
-    float: right;
-    margin-top: 10px;
-    margin-right: 15px;
+  float: right;
+  margin-top: 10px;
+  margin-right: 15px;
 }
 
 /* Fixes overflow on dropdowns in modal */
 .dropdown_fix {
-    overflow: visible;
+  overflow: visible;
+}
+
+/* Replaces CPU hungry spin.js with animated gif */
+.loading_gif {
+  width: 35px;
+  height: 13px;
+  padding-top: 2px;
+  padding-right: 5px;
+  float: left;
 }