Sinewave animation for pending requests

Tryin it on for size.

// FREEBIE

background.html

@@ -78,6 +78,7 @@
           <p class="content">{{ message }}</p>
           <div class='meta'>
             <span class='timestamp'>{{ timestamp }}</span>
+            <span class='sinewave hide'></span>
             <span class='checkmark hide'></span>
             <span class='double-checkmark hide'></span>
           </div>

js/models/messages.js

@@ -139,9 +139,12 @@
         },
 
         send: function(promise) {
+            this.trigger('pending');
             return promise.then(function() {
+                this.trigger('done');
                 this.save({sent: true});
             }.bind(this)).catch(function(errors) {
+                this.trigger('done');
                 this.set({sent: true});
                 this.saveErrors(errors);
             }.bind(this));

js/views/message_view.js

@@ -14,6 +14,8 @@
             this.listenTo(this.model, 'change', this.renderSent);
             this.listenTo(this.model, 'change:flags change:group_update', this.renderControl);
             this.listenTo(this.model, 'destroy', this.remove);
+            this.listenTo(this.model, 'pending', this.renderPending);
+            this.listenTo(this.model, 'done', this.renderDone);
         },
         events: {
             'click .timestamp': 'select',
@@ -26,6 +28,12 @@
         className: function() {
             return ["entry", this.model.get('type')].join(' ');
         },
+        renderPending: function() {
+            this.$el.addClass('pending');
+        },
+        renderDone: function() {
+            this.$el.removeClass('pending');
+        },
         renderSent: function() {
             if (this.model.isOutgoing()) {
                 this.$el.toggleClass('sent', !!this.model.get('sent'));

stylesheets/_conversation.scss

@@ -189,6 +189,15 @@
   margin-right: 3px;
 }
 
+.sinewave {
+  background: url('/images/sinewave.png') repeat-x;
+  animation: backgroundScroll 0.5s linear infinite;
+}
+
+@keyframes backgroundScroll {
+  from {background-position: 0 0;}
+  to {background-position: -18px 0;}
+}
 .entry.sent .checkmark {
   display: inline-block;
   width: 18px;
@@ -204,6 +213,14 @@
     height: 1em;
   }
 }
+.entry.pending {
+  .sinewave {
+    display: inline-block;
+    width: 18px;
+    height: 1em;
+  }
+  .double-checkmark, .checkmark { display: none; }
+}
 
 .message-list {
   margin: 0;

stylesheets/manifest.css

@@ -673,6 +673,15 @@ input.search {
   font-size: smaller;
   margin-right: 3px; }
 
+.sinewave {
+  background: url("/images/sinewave.png") repeat-x;
+  animation: backgroundScroll 0.5s linear infinite; }
+
+@keyframes backgroundScroll {
+  from {
+    background-position: 0 0; }
+  to {
+    background-position: -18px 0; } }
 .entry.sent .checkmark {
   display: inline-block;
   width: 18px;
@@ -687,6 +696,13 @@ input.search {
   width: 18px;
   height: 1em; }
 
+.entry.pending .sinewave {
+  display: inline-block;
+  width: 18px;
+  height: 1em; }
+.entry.pending .double-checkmark, .entry.pending .checkmark {
+  display: none; }
+
 .message-list {
   margin: 0;
   padding: 1em 0;