Fixed append message blink

app/css/app.css

@@ -967,6 +967,9 @@ a.im_dialog:hover .im_dialog_date {
 .im_message_grouped .im_content_message_select_area {
   height: 34px;
 }
+.im_history_appending .im_content_message_select_area {
+  height: 52px;
+}
 .im_message_grouped .icon-select-tick {
   margin-top: 4px;
 }

app/js/controllers.js

@@ -454,14 +454,14 @@ angular.module('myApp.controllers', [])
 
       for (i = start; i < end; i++) {
         curMessage = $scope.history[i];
-        // if (prevMessage) console.log(dT(), curMessage.from_id == prevMessage.from_id, curMessage.date - prevMessage.date);
         if (prevMessage &&
             curMessage.from_id == prevMessage.from_id &&
             curMessage.date < prevMessage.date + 30 &&
             !curMessage.fwd_from_id &&
             curMessage.message && curMessage.message.length < 30) {
+
           curMessage.grouped = true;
-        } else if (!start) {
+        } else if (prevMessage || !i) {
           delete curMessage.grouped;
         }
         prevMessage = curMessage;

app/js/directives.js

@@ -149,7 +149,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
-  .directive('myHistory', function ($window, $timeout) {
+  .directive('myHistory', function ($window, $timeout, $transition) {
 
     return {
       link: link
@@ -199,9 +199,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         if (!atBottom && !options.my) {
           return;
         }
-        if (animated) {
-          $(scrollableWrap).stop();
-        } else {
+        if (!animated) {
           $(scrollable).css({bottom: 0});
           $(scrollableWrap).addClass('im_history_to_bottom');
         }
@@ -213,22 +211,22 @@ angular.module('myApp.directives', ['myApp.filters'])
             $(historyMessagesEl).removeClass('im_history_appending');
             scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
             $(historyMessagesEl).css(transform, 'translate(0px, ' + (scrollableWrap.scrollHeight - wasH) + 'px)');
-            setTimeout(function () {
-              $(historyMessagesEl).addClass('im_history_appending');
-              $(historyMessagesEl).css(transform, 'translate(0px, 0px)');
-              setTimeout(function () {
-                curAnimation = false;
-                $(historyMessagesEl).removeClass('im_history_appending');
-                updateBottomizer();
-              }, 300);
-            }, 0);
+            $(historyWrap).nanoScroller();
+            var styles = {};
+            styles[transform] = 'translate(0px, 0px)';
+            $(historyMessagesEl).addClass('im_history_appending');
+            $transition($(historyMessagesEl), styles).then(function () {
+              curAnimation = false;
+              $(historyMessagesEl).removeClass('im_history_appending');
+              updateBottomizer();
+            });
           } else {
             $(scrollableWrap).removeClass('im_history_to_bottom');
             $(scrollable).css({bottom: ''});
             scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
             updateBottomizer();
+            $(historyWrap).nanoScroller();
           }
-          $(historyWrap).nanoScroller();
         });
       });