Commit a73e1baa authored by Steffen van Bergerem's avatar Steffen van Bergerem Committed by Benjamin Neff
Browse files

Show spinner when loading comments 

closes #7170
parent 951149dd

Changelog.md

+1 −0
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ 
* Hide 'reshare' button on already reshared posts [#7169](https://github.com/diaspora/diaspora/pull/7169)



## Features

* Show spinner when loading comments in the stream [#7170](https://github.com/diaspora/diaspora/pull/7170)



# 0.6.1.0

app/assets/javascripts/app/views/comment_stream_view.js

+2 −0
Original line number Diff line number Diff line
@@ -104,10 +104,12 @@ app.views.CommentStream = app.views.Base.extend({ 
  },



  expandComments: function(evt){

    this.$(".loading-comments").removeClass("hidden");

    if(evt){ evt.preventDefault(); }

    this.model.comments.fetch({

      success: function() {

        this.$("div.comment.show_comments").addClass("hidden");

        this.$(".loading-comments").addClass("hidden");

      }.bind(this)

    });

  }

app/assets/stylesheets/comments.scss

+15 −1
Original line number Diff line number Diff line 
.comment_stream {

  .show_comments {

    margin-top: 5px;

    border-top: 1px solid $border-grey;

    line-height: $line-height-computed;

    margin-top: 5px;

    a {

      color: $text-grey;

      font-size: 13px;

    }

    .media { margin-top: 10px; }

  }



  .loading-comments {

    height: $line-height-computed + 11px; // height of .show_comments: line-height, 10px margin, 1px border

    margin-top: -$line-height-computed - 11px;



    .loader {

      height: 20px;

      width: 20px;

    }



    .media { margin: 5px; }

  }



  .comments > .comment,

  .comment.new-comment-form-wrapper {

    .avatar {

app/assets/templates/comment-stream_tpl.jst.hbs

+8 −0
Original line number Diff line number Diff line
@@ -6,6 +6,14 @@ 
  </div>

</div>



<div class="loading-comments comment text-center hidden">

  <div class="media">

    <div class="loader">

      <div class="spinner"></div>

    </div>

  </div>

</div>



<div class="comments"> </div>



{{#if loggedIn}}

spec/javascripts/app/views/comment_stream_view_spec.js

+13 −0
Original line number Diff line number Diff line
@@ -164,6 +164,19 @@ describe("app.views.CommentStream", function(){ 
        }).join("")

      );

    });



    it("shows the spinner when loading comments and removes it on success", function() {

      this.view.render();

      expect(this.view.$(".loading-comments")).toHaveClass("hidden");



      this.view.expandComments();

      expect(this.view.$(".loading-comments")).not.toHaveClass("hidden");



      jasmine.Ajax.requests.mostRecent().respondWith({

        status: 200, responseText: JSON.stringify([])

      });

      expect(this.view.$(".loading-comments")).toHaveClass("hidden");

    });

  });



  describe("pressing a key when typing on the new comment box", function(){