Show spinner when loading comments

diaspora · Nov 2, 2016 · 9e4405f · 9e4405f
1 parent f35eac3
commit 9e4405f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/app/assets/javascripts/app/views/comment_stream_view.js b/app/assets/javascripts/app/views/comment_stream_view.js
@@ -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)
     });
   }

diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
@@ -1,13 +1,27 @@
 .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 {

diff --git a/app/assets/templates/comment-stream_tpl.jst.hbs b/app/assets/templates/comment-stream_tpl.jst.hbs
@@ -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}}

diff --git a/spec/javascripts/app/views/comment_stream_view_spec.js b/spec/javascripts/app/views/comment_stream_view_spec.js
@@ -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(){