Fix comments on collapsed and expanded diffs

app/assets/javascripts/single_diff.js.coffee

 class @SingleDiff
 
+  WRAPPER = '<div class="diff-content diff-wrap-lines"></div>'
   LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>'
   ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>'
   COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. Click to expand it.</div>'
@@ -7,51 +8,47 @@ class @SingleDiff
   constructor: (@file) ->
     @content = $('.diff-content', @file)
     @diffForPath = @content.find('[data-diff-for-path]').data 'diff-for-path'
-    @setOpenState()
+    @isOpen = !@diffForPath
 
-    $('.file-title > a', @file).on 'click', @toggleDiff
-    @enableToggleOnContent()
-
-  setOpenState: ->
     if @diffForPath
-      @isOpen = false
+      @collapsedContent = @content
+      @loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide()
+      @content = null
+      @collapsedContent.after(@loadingContent)
     else
-      @isOpen = true
-      @contentHTML = @content.html()
-    return
+      @collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide()
+      @content.after(@collapsedContent)
 
-  enableToggleOnContent: ->
-    @content.find('.nothing-here-block.diff-collapsed').on 'click', @toggleDiff
+    @collapsedContent.on 'click', @toggleDiff
+
+    $('.file-title > a', @file).on 'click', @toggleDiff
 
   toggleDiff: (e) =>
     e.preventDefault()
     @isOpen = !@isOpen
     if not @isOpen and not @hasError
-      @content.html COLLAPSED_HTML
-      @enableToggleOnContent
-      return
-    if @contentHTML
-      @setContentHTML()
+      @content.hide()
+      @collapsedContent.show()
+    else if @content
+      @collapsedContent.hide()
+      @content.show()
     else
       @getContentHTML()
-    return
 
   getContentHTML: ->
-    @content.html(LOADING_HTML).addClass 'loading'
+    @collapsedContent.hide()
+    @loadingContent.show()
     $.get @diffForPath, (data) =>
+      @loadingContent.hide()
       if data.html
-        @setContentHTML data.html
+        @content = $(data.html)
+        @content.syntaxHighlight()
       else
         @hasError = true
-        @content.html ERROR_HTML
-      @content.removeClass 'loading'
+        @content = $(ERROR_HTML)
+      @collapsedContent.after(@content)
     return
 
-  setContentHTML: (contentHTML) ->
-    @contentHTML = contentHTML if contentHTML
-    @content.html @contentHTML
-    @content.syntaxHighlight()
-
 $.fn.singleDiff = ->
   return @each ->
     if not $.data this, 'singleDiff'