[extensions-web] js: Add a fancy spinning icon for the paginator's loading screen

[Jasper St. Pierre <jstpierre src gnome org>]

commit 651d1bb40435789900fd53ac3833208d38e22db6
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Apr 2 20:33:13 2012 -0400

    js: Add a fancy spinning icon for the paginator's loading screen
    
    Remove the old text and add a fancy spinning icon instead.

 sweettooth/static/css/sweettooth.css               |   26 ++++---------------
 sweettooth/static/images/spinner.gif               |  Bin 0 -> 1849 bytes
 sweettooth/static/js/paginator.js                  |   10 ++-----
 .../js/templates/paginator/loading_page.mustache   |    3 --
 sweettooth/static/js/templates/templatedata.js     |    3 --
 5 files changed, 9 insertions(+), 33 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 38205a7..32b14be 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -132,6 +132,12 @@ hr.bottom_shadow {
     padding: 3px;
 }
 
+.paginator.loading {
+    background-image: url(../images/spinner.gif);
+    background-repeat: no-repeat;
+    background-position: 8px 8px;
+}
+
 .paginator .number {
     display: inline-block;
     min-width: 1.5em;
@@ -241,26 +247,6 @@ hr.bottom_shadow {
     position: relative;
 }
 
-#extensions-list.loading {
-    opacity: 0.5;
-}
-
-#extensions-list .loading-page {
-    background: #EEEEEC;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-    padding: .5em;
-    text-align: center;
-
-    position: absolute;
-    left: 50%;
-    width: 300px;
-    margin-left: -150px;
-
-    z-index: 999;
-}
-
 ul.extensions {
     margin-top: 0;
 }
diff --git a/sweettooth/static/images/spinner.gif b/sweettooth/static/images/spinner.gif
new file mode 100644
index 0000000..5b33f7e
Binary files /dev/null and b/sweettooth/static/images/spinner.gif differ
diff --git a/sweettooth/static/js/paginator.js b/sweettooth/static/js/paginator.js
index 4cd0281..222a492 100644
--- a/sweettooth/static/js/paginator.js
+++ b/sweettooth/static/js/paginator.js
@@ -10,8 +10,6 @@ define(['jquery', 'hashParamUtils', 'paginatorUtils', 'dbus!_', 'templates', 'jq
         if (context === undefined)
             context = 3;
 
-        var $loadingPageContent = $(templates.paginator.loading_page());
-
         var $elem = $(this);
         var $beforePaginator = null;
         var $afterPaginator = null;
@@ -19,12 +17,12 @@ define(['jquery', 'hashParamUtils', 'paginatorUtils', 'dbus!_', 'templates', 'jq
         var currentRequest = null;
 
         function loadPage() {
-            $elem.addClass('loading');
-            $loadingPageContent.prependTo($elem);
-
             if (currentRequest !== null)
                 currentRequest.abort();
 
+            if ($beforePaginator !== null)
+                $beforePaginator.addClass('loading');
+
             var queryParams = hashParamUtils.getHashParams();
             if (queryParams.page === undefined)
                 queryParams.page = 1;
@@ -44,8 +42,6 @@ define(['jquery', 'hashParamUtils', 'paginatorUtils', 'dbus!_', 'templates', 'jq
                 if ($afterPaginator)
                     $afterPaginator.detach();
 
-                $loadingPageContent.detach();
-
                 var page = parseInt(queryParams.page, 10);
                 var numPages = result.numpages;
 
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 1af72d0..8d837b2 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -13,8 +13,5 @@ define({
     "cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.", 
     "cannot_list_local": "GNOME Shell Extensions cannot list your installed extensions.", 
     "dummy_proxy": "You do not appear to have an up to date version of GNOME3. You won't be able to install extensions from here. See the <a href=\"about/#old-version\">about page</a> for more information."
-  }, 
-  "paginator": {
-    "loading_page": "<div class=\"loading-page\">\n  Loading page... please wait.\n</div>"
   }
 });