Show busy spinner image when submitting a tweet reply. [bug 617363]

mythmon · Dec 7, 2010 · 40aa386 · 40aa386
1 parent fef6d38
commit 40aa386
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 26 deletions.
diff --git a/apps/customercare/templates/customercare/reply_modal.html b/apps/customercare/templates/customercare/reply_modal.html
@@ -46,7 +46,7 @@ <h4>Get personal</h4>
 
             <span id="submit-message">Your message was sent!</span>
             <span id="error-message"></span>
-            <input type="submit" value="Submit" name="submit" id="submit" class="submitButton" title="Submit">
+            <a href="#submit" id="submit" class="submitButton" title="Submit">Submit <img id="submit-busy" src="{{ MEDIA_URL }}img/customercare/spinner.gif"/></a>
           </form>
         </div>
       </div>

diff --git a/media/css/customercare.css b/media/css/customercare.css
@@ -411,11 +411,31 @@
     cursor: pointer;
     float: right;
     height: 36px;
+    line-height: 36px;
     margin-top: 10px;
+    text-align: center;
     text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
     width: 140px;
 }
 
+#submit-busy {
+    display: none;
+    height: 13px;
+    padding-left: 5px;
+    width: 13px;
+}
+
+#reply .submitButton.busy {
+    background: -moz-linear-gradient(center top, #ccc 15px, #ccc 18px, #aaa, #aaa);
+    background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #ccc), color-stop(.5, #ccc), color-stop(.75, #aaa), to(#aaa));
+    border-color: #aaa;
+    color: #666;
+}
+
+#reply .submitButton.busy #submit-busy {
+    display: inline;
+}
+
 #reply .character-counter {
     color: #fff;
     float: right;

diff --git a/media/js/customercare.js b/media/js/customercare.js
@@ -177,32 +177,38 @@
             this.$el.find('#submit').bind('click', {reply: this}, function(e) {
                 var reply = e.data.reply,
                     data = {
-                    'content': reply.content,
-                    'reply_to': reply.tweet.id,
-                };
-
-                $.ajax({
-                    url: reply.action,
-                    data: data,
-                    type: 'POST',
-                    success: function(data) {
-                        // Remember reply ID.
-                        last_reply.id = reply.tweet.id;
-                        mark_last_reply();
-
-                        reply.$success_msg.show();
-                        setTimeout(function() {
-                            reply.close();
-                        }, 2000);
+                        'content': reply.content,
+                        'reply_to': reply.tweet.id,
                     },
-                    error: function(data) {
-                        reply.$error_msg.text(data.responseText);
-                        reply.$error_msg.show();
-                        setTimeout(function() {
-                            reply.$error_msg.fadeOut();
-                        }, 4000);
-                    },
-                });
+                    $btn = $(this);
+                if (!$btn.is('.busy')) {
+                    $btn.addClass('busy');
+                    $.ajax({
+                        url: reply.action,
+                        data: data,
+                        type: 'POST',
+                        success: function(data) {
+                            // Remember reply ID.
+                            last_reply.id = reply.tweet.id;
+                            mark_last_reply();
+
+                            reply.$success_msg.show();
+                            setTimeout(function() {
+                                reply.close();
+                            }, 2000);
+                        },
+                        error: function(data) {
+                            reply.$error_msg.text(data.responseText);
+                            reply.$error_msg.show();
+                            setTimeout(function() {
+                                reply.$error_msg.fadeOut();
+                            }, 4000);
+                        },
+                        complete: function() {
+                            $btn.removeClass('busy');
+                        }
+                    });
+                }
                 e.preventDefault();
                 return false;
             });