From c77391b3f2775450e2d26f2f4dadfdd8cfb99abb Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 28 Oct 2015 13:57:32 -0700
Subject: [PATCH] Sinewave animation for pending requests

Tryin it on for size.

// FREEBIE
---
 background.html                |  1 +
 js/models/messages.js          |  3 +++
 js/views/message_view.js       |  8 ++++++++
 stylesheets/_conversation.scss | 17 +++++++++++++++++
 stylesheets/manifest.css       | 16 ++++++++++++++++
 5 files changed, 45 insertions(+)

diff --git a/background.html b/background.html
index 0fc48de262..ce4387f1ec 100644
--- a/background.html
+++ b/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>
diff --git a/js/models/messages.js b/js/models/messages.js
index 2d711a4ca0..18c61b806e 100644
--- a/js/models/messages.js
+++ b/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));
diff --git a/js/views/message_view.js b/js/views/message_view.js
index ad79515931..3c0ca0a865 100644
--- a/js/views/message_view.js
+++ b/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'));
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ee56482e3f..bbc01d49db 100644
--- a/stylesheets/_conversation.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 06e906e894..59bcd98f3c 100644
--- a/stylesheets/manifest.css
+++ b/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;