Render messages light blue until finished sending // Fixes #219

js/models/conversations.js

@@ -75,7 +75,8 @@
             type           : 'outgoing',
             attachments    : attachments,
             sent_at        : now,
-            received_at    : now
+            received_at    : now,
+            pending        : true
         });
         message.save();
 
@@ -95,7 +96,10 @@
         else {
             sendFunc = textsecure.messaging.sendMessageToGroup;
         }
-        sendFunc(this.get('id'), body, attachments, now).catch(function(errors) {
+        sendFunc(this.get('id'), body, attachments, now).then(function() {
+            message.unset('pending');
+            message.save();
+        }.bind(this)).catch(function(errors) {
             var keyErrors = [];
             _.each(errors, function(e) {
                 if (e.error.name === 'OutgoingIdentityKeyError') {

js/views/message_view.js

@@ -23,6 +23,7 @@
         initialize: function() {
             this.listenTo(this.model, 'change:body change:errors', this.render);
             this.listenTo(this.model, 'change:delivered', this.renderDelivered);
+            this.listenTo(this.model, 'change', this.renderPending);
             this.listenTo(this.model, 'change:flags change:group_update', this.renderControl);
             this.listenTo(this.model, 'destroy', this.remove);
         },
@@ -35,6 +36,11 @@
         className: function() {
             return ["entry", this.model.get('type')].join(' ');
         },
+        renderPending: function() {
+            if (this.model.isOutgoing()) {
+                this.$el.toggleClass('pending', !!this.model.get('pending'));
+            }
+        },
         renderDelivered: function() {
             if (this.model.get('delivered')) { this.$el.addClass('delivered'); }
         },
@@ -66,6 +72,7 @@
             content.html(this.autoLink(content.html()));
 
             this.renderDelivered();
+            this.renderPending();
             this.renderControl();
 
             this.$('.attachments').append(

stylesheets/_conversation.scss

@@ -182,6 +182,10 @@
     }
   }
 
+  .outgoing.pending .bubble {
+    opacity: 0.7;
+  }
+
   .incoming {
     .bubble {
       color: $grey_d;

stylesheets/manifest.css

@@ -500,6 +500,9 @@ input.search {
     .message-detail .bubble p,
     .message-list .bubble p {
       margin: 0; }
+  .message-detail .outgoing.pending .bubble,
+  .message-list .outgoing.pending .bubble {
+    opacity: 0.7; }
   .message-detail .incoming .bubble,
   .message-list .incoming .bubble {
     color: #454545;