Merge pull request #521 from MITx/feature/rocky/loading

added a loading icon when retrieving ajax

lms/static/coffee/src/discussion/content.coffee

@@ -120,7 +120,12 @@ if Backbone?
       else
         $elem = $.merge @$(".thread-title"), @$showComments()
         url = @model.urlFor('retrieve')
-        DiscussionUtil.get $elem, url, {}, (response, textStatus) =>
+        DiscussionUtil.safeAjax
+          $elem: $elem
+          $loading: $(event.target) if event
+          type: "GET"
+          url: url
+          success: (response, textStatus) =>
             @showed = true
             @updateShowComments()
             @$showComments().addClass("retrieved")
@@ -169,6 +174,7 @@ if Backbone?
 
       DiscussionUtil.safeAjax
         $elem: $(event.target)
+        $loading: $(event.target) if event
         url: url
         type: "POST"
         dataType: 'json'
@@ -197,14 +203,22 @@ if Backbone?
     unvote: (event) ->
       url = @model.urlFor('unvote')
       $elem = @$(".discussion-vote")
-      DiscussionUtil.post $elem, url, {}, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        type: "POST"
+        success: (response, textStatus) =>
           @model.set('voted', '')
           @model.set('votes_point', response.votes.point)
 
     vote: (event, value) ->
       url = @model.urlFor("#{value}vote")
       $elem = @$(".discussion-vote")
-      DiscussionUtil.post $elem, url, {}, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        type: "POST"
+        success: (response, textStatus) =>
           @model.set('voted', value)
           @model.set('votes_point', response.votes.point)
 
@@ -221,7 +235,12 @@ if Backbone?
       url = @model.urlFor('endorse')
       endorsed = @model.get('endorsed')
       data = { endorsed: not endorsed }
-      DiscussionUtil.post $elem, url, data, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        data: data
+        type: "POST"
+        success: (response, textStatus) =>
           @model.set('endorsed', not endorsed)
 
     toggleFollow: (event) ->
@@ -231,7 +250,11 @@ if Backbone?
         url = @model.urlFor('unfollow')
       else
         url = @model.urlFor('follow')
-      DiscussionUtil.post $elem, url, {}, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        type: "POST"
+        success: (response, textStatus) =>
           @model.set('subscribed', not subscribed)
 
     toggleClosed: (event) ->
@@ -239,7 +262,12 @@ if Backbone?
       url = @model.urlFor('close')
       closed = @model.get('closed')
       data = { closed: not closed }
-      DiscussionUtil.post $elem, url, data, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        type: "POST"
+        data: data
+        success: (response, textStatus) =>
           @model.set('closed', not closed)
 
     edit: (event) ->
@@ -274,6 +302,7 @@ if Backbone?
         data.body = DiscussionUtil.getWmdContent @$el, $.proxy(@$, @), "comment-body-edit"
       DiscussionUtil.safeAjax
         $elem: $(event.target)
+        $loading: $(event.target) if event
         url: url
         type: "POST"
         dataType: 'json'
@@ -298,7 +327,10 @@ if Backbone?
       if not c
         return
       $elem = $(event.target)
-      DiscussionUtil.post $elem, url, {}, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        success: (response, textStatus) =>
           @$el.remove()
           @model.get('thread').removeComment(@model)
         

lms/static/coffee/src/discussion/discussion.coffee

@@ -39,7 +39,12 @@ if Backbone?
 
     reload: ($elem, url) ->
       if not url then return
-      DiscussionUtil.get $elem, url, {}, (response, textStatus) =>
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        $loading: $elem
+        url: url
+        type: "GET"
+        success: (response, textStatus) =>
           $parent = @$el.parent()
           @$el.replaceWith(response.html)
           $discussion = $parent.find("section.discussion")
@@ -115,6 +120,7 @@ if Backbone?
       url = DiscussionUtil.urlFor('create_thread', @model.id)
       DiscussionUtil.safeAjax
         $elem: $(event.target)
+        $loading: $(event.target) if event
         url: url
         type: "POST"
         dataType: 'json'

lms/static/coffee/src/discussion/discussion_module.coffee

@@ -18,6 +18,7 @@ if Backbone?
           url = DiscussionUtil.urlFor 'retrieve_discussion', discussion_id
           DiscussionUtil.safeAjax
             $elem: $elem
+            $loading: $elem
             url: url
             type: "GET"
             dataType: 'json'

lms/static/coffee/src/discussion/utils.coffee

+$ ->
+  $.fn.extend
+    loading: ->
+      $(this).after("<span class='discussion-loading'></span>")
+    loaded: ->
+      $(this).parent().children(".discussion-loading").remove()
+
 class @DiscussionUtil
 
   @wmdEditors: {}
@@ -62,9 +69,16 @@ class @DiscussionUtil
     $elem = params.$elem
     if $elem.attr("disabled")
       return
+    params["beforeSend"] = ->
       $elem.attr("disabled", "disabled")
+      if params["$loading"]
+        console.log "loading"
+        params["$loading"].loading()
     $.ajax(params).always ->
       $elem.removeAttr("disabled")
+      if params["$loading"]
+        console.log "loaded"
+        params["$loading"].loaded()
 
   @get: ($elem, url, data, success) ->
     @safeAjax

lms/static/sass/_discussion.scss

@@ -35,7 +35,13 @@ $tag-text-color: #5b614f;
   }
 }
 
-
+.discussion-loading {
+  background-image: url(../images/discussion/loading.gif);
+  width: 15px;
+  height: 15px;
+  margin-left: 2px;
+  display: inline-block;
+}
 
 /*** Discussions ***/
 
@@ -49,8 +55,6 @@ $tag-text-color: #5b614f;
     margin-top: 0;
   }
 
-
-
   /*** Sidebar ***/
 
   .sidebar-module {