Add spinner for long-loading message lists

js/views/message_list_view.js

@@ -19,14 +19,18 @@
 
     Whisper.MessageListView = Whisper.ListView.extend({
         tagName: 'ul',
-        className: 'message-list',
+        className: 'message-list loading',
         itemView: Whisper.MessageView,
         events: {
-            'add': 'scrollToBottom',
+            'add': 'onAdd',
             'update *': 'scrollToBottom',
             'scroll': 'measureScrollPosition',
             'reset-scroll': 'resetScrollPosition'
         },
+        onAdd: function() {
+            this.$el.removeClass('loading');
+            this.scrollToBottom();
+        },
         measureScrollPosition: function() {
             this.scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
             this.scrollHeight = this.el.scrollHeight;

stylesheets/_conversation.scss

@@ -125,6 +125,7 @@
       text-decoration: underline;
     }
   }
+
 }
 
 .message-detail,

stylesheets/_global.scss

@@ -378,3 +378,22 @@ $avatar-size: 44px;
 .avatar.color13 { background-color: #FF5722 } // deep orange
 .avatar.color14 { background-color: #FFB300 } // amber
 .avatar.color15 { background-color: #607D8B } // blue grey
+
+.loading {
+  position: relative;
+  &::after {
+    display: block;
+    margin: $header-height auto;
+    content: " ";
+    height: $header-height;
+    width: $header-height;
+    border-radius: 2 * $header-height;
+    border: solid 3px;
+    border-color: $blue_l $blue_l $grey_l $grey_l;
+    animation: rotate 1s linear infinite;
+  }
+
+  @keyframes rotate {
+    to { transform: rotate(360deg); }
+  }
+}

stylesheets/manifest.css

@@ -329,6 +329,21 @@ img.emoji {
 .avatar.color15 {
   background-color: #607D8B; }
 
+.loading {
+  position: relative; }
+  .loading::after {
+    display: block;
+    margin: 36px auto;
+    content: " ";
+    height: 36px;
+    width: 36px;
+    border-radius: 72px;
+    border: solid 3px;
+    border-color: #a2d2f4 #a2d2f4 #f3f3f3 #f3f3f3;
+    animation: rotate 1s linear infinite; }
+@keyframes rotate {
+  to {
+    transform: rotate(360deg); } }
 .gutter {
   padding: 36px 0 0; }