logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: c7908e2d094481537a96ef2a1b13c6159744210b
parent: c9d04f1c39dc95a54d058eaed794c2fcb9e62b6b
Author: unarist <m.unarist@gmail.com>
Date:   Sat,  9 Sep 2017 21:16:11 +0900

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

Diffstat:

Mapp/javascript/mastodon/components/scrollable_list.js24+++++++++++++-----------
1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/javascript/mastodon/components/scrollable_list.js b/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,18 +68,20 @@ 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)) { - const newScrollTop = this.node.scrollHeight - this._oldScrollPosition; + if (someItemInserted && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) { + const newScrollTop = this.node.scrollHeight - this._oldScrollPosition; - if (this.node.scrollTop !== newScrollTop) { - this.node.scrollTop = newScrollTop; - } - } else { - this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop; + if (this.node.scrollTop !== newScrollTop) { + this.node.scrollTop = newScrollTop; } + } else { + this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop; } } @@ -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) => {