Fix scroll behavior and others on paused timeline (#4864)

Resolved:

* Lot of redundant renders while mouse moving
* Scroll jumping when timeline loaded
* Scroll position isn't kept when statuses below the scrollTop was deleted then new status arrived

Unresolved:

* Scroll position isn't kept when statuses over the scrollTop was deleted then new status arrived
-> It needs to know which statuses are over the scrollTop
* New status indicator should be active when new statuses arrived while mouse moved recently
-> It needs a) update indicator in ScrollableList, or b) set scrollTop status while mouse moving

app/javascript/mastodon/components/scrollable_list.js

@@ -52,11 +52,11 @@ export default class ScrollableList extends PureComponent {
   });
 
   handleMouseMove = throttle(() => {
-    this.setState({ lastMouseMove: new Date() });
+    this._lastMouseMove = new Date();
   }, 300);
 
   handleMouseLeave = () => {
-    this.setState({ lastMouseMove: null });
+    this._lastMouseMove = null;
   }
 
   componentDidMount () {
@@ -68,10 +68,13 @@ export default class ScrollableList extends PureComponent {
   }
 
   componentDidUpdate (prevProps) {
+    const someItemInserted = React.Children.count(prevProps.children) > 0 &&
+      React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
+      this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
+
     // Reset the scroll position when a new child comes in in order not to
     // jerk the scrollbar around if you're already scrolled down the page.
-    if (React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) {
-      if (this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props)) {
+    if (someItemInserted && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) {
       const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
 
       if (this.node.scrollTop !== newScrollTop) {
@@ -81,7 +84,6 @@ export default class ScrollableList extends PureComponent {
       this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
     }
   }
-  }
 
   componentWillUnmount () {
     this.detachScrollListener();
@@ -128,7 +130,7 @@ export default class ScrollableList extends PureComponent {
   }
 
   _recentlyMoved () {
-    return this.state.lastMouseMove === null || ((new Date()) - this.state.lastMouseMove < 600);
+    return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
   }
 
   handleKeyDown = (e) => {