[extensions-web] Improve comment loading experience

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

commit 9d6ca5a79f7c1b3a32cbb3b765a70341af45e46a
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Mar 18 00:49:44 2013 -0400

    Improve comment loading experience

 .../extensions/templates/extensions/comments.html  |    3 ++-
 sweettooth/static/css/sweettooth.css               |    8 ++++++++
 sweettooth/static/js/main.js                       |    6 +++++-
 3 files changed, 15 insertions(+), 2 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/comments.html 
b/sweettooth/extensions/templates/extensions/comments.html
index e4ed3b5..36e6cae 100644
--- a/sweettooth/extensions/templates/extensions/comments.html
+++ b/sweettooth/extensions/templates/extensions/comments.html
@@ -1,6 +1,7 @@
 <div id="comments">
   <h4>User Reviews</h4>
-  <p class="comments-holder">Loading reviews...</p>
+  <div class="comments-holder"></div>
+  <p class="loading">Loading reviews...</p>
 </div>
 <div id="opinion_form">
   <h4>Your opinion</h4>
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 230c176..504f54a 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -1017,6 +1017,14 @@ li.extension:last-child {
     margin-right: 30px;
 }
 
+#comments .loading {
+    background-image: url(../images/spinner.gif);
+    background-repeat: no-repeat;
+    padding-left: 24px;
+    margin-left: 8px;
+    line-height: 16px;
+}
+
 #comments .show-all {
     font-weight: bold;
     cursor: pointer;
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index e2595cd..d474bda 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -177,6 +177,9 @@ function($, messages, modal, hashParamUtils, templates) {
             }
 
             function fetchComments(base, showAll) {
+                var $loading = base.find('.loading');
+                $loading.show();
+
                 $.ajax({
                     type: 'GET',
                     dataType: 'json',
@@ -192,9 +195,10 @@ function($, messages, modal, hashParamUtils, templates) {
                     $newContent.find('time').timeago();
                     $newContent.find('.rating').ratify();
                     $newContent.find('.show-all').on('click', function() {
-                        $(this).addClass('loading');
+                        $(this).hide();
                         fetchComments(base, true);
                     });
+
                     $commentsHolder.replaceWith($newContent);
                 });
             }