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

@@ -13,7 +13,18 @@ const fetchThreshold = 600;
 // this is done to prevent the scroll from jumping all over the place
 const scrollbackDebounce = 150;
 
-const scrollBarWidth = `${measureScrollBarWidth()  }px`;
+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) {
+    } else if (
-      this.list.current.scrollToItem(this.props.messages.length + 1);
+      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/components/pages/Connect.js

@@ -67,7 +67,7 @@ class Connect extends Component {
       .filter(s => s)
       .join(',');
 
-    return comma ? `${channels  },` : channels;
+    return comma ? `${channels},` : channels;
   };
 
   render() {

client/js/serviceWorker.js

@@ -24,8 +24,8 @@ function registerValidSW(swUrl, config) {
                 config.onUpdate(registration);
               }
             } else if (config && config.onSuccess) {
-                config.onSuccess(registration);
+              config.onSuccess(registration);
-              }
+            }
           }
         };
       };

client/js/utils/size.js

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