Fix MessageBox scroll stutter when state updates while close to the bottom

client/js/commands.js

@@ -80,7 +80,8 @@ export default createCommandMiddleware(COMMAND, {
     if (newTopic.length > 0) {
       dispatch(setTopic(newTopic.join(' '), channel, server));
       return;
-    } if (channel) {
+    }
+    if (channel) {
       const { topic } = getState().channels[server][channel];
       if (topic) {
         return text(topic);

client/js/components/pages/Chat/MessageBox.js

@@ -15,6 +15,17 @@ const scrollbackDebounce = 150;
 
 const scrollBarWidth = `${measureScrollBarWidth()}px`;
 
+const hasSameLastMessage = (m1, m2) => {
+  if (m1.length === 0 || m2.length === 0) {
+    if (m1.length === 0 && m2.length === 0) {
+      return true;
+    }
+    return false;
+  }
+
+  return m1[m1.length - 1].id === m2[m2.length - 1].id;
+};
+
 export default class MessageBox extends PureComponent {
   state = { topDate: '' };
 
@@ -35,6 +46,8 @@ export default class MessageBox extends PureComponent {
   }
 
   componentDidUpdate(prevProps) {
+    const { messages } = this.props;
+
     if (prevProps.tab !== this.props.tab) {
       this.loadScrollPos(true);
     }
@@ -42,8 +55,11 @@ export default class MessageBox extends PureComponent {
     if (this.nextScrollTop > 0) {
       this.list.current.scrollTo(this.nextScrollTop);
       this.nextScrollTop = 0;
-    } else if (this.bottom) {
-      this.list.current.scrollToItem(this.props.messages.length + 1);
+    } else if (
+      this.bottom &&
+      !hasSameLastMessage(messages, prevProps.messages)
+    ) {
+      this.list.current.scrollToItem(messages.length + 1);
     }
   }
 
@@ -93,7 +109,8 @@ export default class MessageBox extends PureComponent {
         return 100;
       }
       return 7;
-    } if (index === messages.length + 1) {
+    }
+    if (index === messages.length + 1) {
       return 7;
     }
     return messages[index - 1].height;
@@ -104,7 +121,8 @@ export default class MessageBox extends PureComponent {
 
     if (index === 0) {
       return 'top';
-    } if (index === messages.length + 1) {
+    }
+    if (index === messages.length + 1) {
       return 'bottom';
     }
     return messages[index - 1].id;
@@ -220,7 +238,8 @@ export default class MessageBox extends PureComponent {
         );
       }
       return null;
-    } if (index === messages.length + 1) {
+    }
+    if (index === messages.length + 1) {
       return null;
     }
 

client/js/components/pages/Chat/UserList.js

@@ -28,7 +28,8 @@ export default class UserList extends PureComponent {
 
     if (index === 0) {
       return 12;
-    } if (index === users.length + 1) {
+    }
+    if (index === users.length + 1) {
       return 10;
     }
     return 24;
@@ -39,7 +40,8 @@ export default class UserList extends PureComponent {
 
     if (index === 0) {
       return 'top';
-    } if (index === users.length + 1) {
+    }
+    if (index === users.length + 1) {
       return 'bottom';
     }
     return index;

client/js/utils/size.js

@@ -1,4 +1,5 @@
-let width; let height;
+let width;
+let height;
 const listeners = [];
 
 function update() {