From fbc73c0369744a68f8b21c8b0f0c5dfeb58d3d15 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 26 Aug 2015 17:30:20 -0700
Subject: [PATCH] Add spinner for long-loading message lists

---
 js/views/message_list_view.js  |  8 ++++++--
 stylesheets/_conversation.scss |  1 +
 stylesheets/_global.scss       | 19 +++++++++++++++++++
 stylesheets/manifest.css       | 15 +++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/js/views/message_list_view.js b/js/views/message_list_view.js
index b32a35dcaadc..d4cbdf05f0da 100644
--- a/js/views/message_list_view.js
+++ b/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;
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 15894ac2c2b3..6a6007f34f01 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -125,6 +125,7 @@
       text-decoration: underline;
     }
   }
+
 }
 
 .message-detail,
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index a5e3f9d9861b..977a4c3bea8a 100644
--- a/stylesheets/_global.scss
+++ b/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); }
+  }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index cbf2729cdcd6..c409f71a0f9a 100644
--- a/stylesheets/manifest.css
+++ b/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; }