imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix infinite loop when there are a lot of invisible events (#554)

Browse source 
Instead of using a window of a fixed number of events, unpaginate based on the distance of the viewport from the end of the scroll range.

The ScrollPanel uses the scrollTokens to convey to its parent (the TimelinePanel, in this case) the point to unpaginate up to. The TimelinePanel then takes a chunk of events off the front or back of `this.state.events` using `timelineWindow.unpaginate`.

Fixes https://github.com/vector-im/vector-web/issues/2020
This commit is contained in:
Luke Barnard 2016-11-16 14:25:52 +00:00 • committed by Richard van der Hoff
parent 6ccc825f0d
commit b718f1542c
4 changed files with 137 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/structures/TimelinePanel.js
View file

@ -108,7 +108,9 @@ var TimelinePanel = React.createClass({
getDefaultProps: function() {
return {
timelineCap: 250,
// By default, disable the timelineCap in favour of unpaginating based on
// event tile heights. (See _unpaginateEvents)
timelineCap: Number.MAX_VALUE,
className: 'mx_RoomView_messagePanel',
};
},
@ -245,6 +247,30 @@ var TimelinePanel = React.createClass({
}
},
onMessageListUnfillRequest: function(backwards, scrollToken) {
let dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
debuglog("TimelinePanel: unpaginating events in direction", dir);
// All tiles are inserted by MessagePanel to have a scrollToken === eventId
let eventId = scrollToken;
let marker = this.state.events.findIndex(
(ev) => {
return ev.getId() === eventId;
}
);
let count = backwards ? marker + 1 : this.state.events.length - marker;
if (count > 0) {
debuglog("TimelinePanel: Unpaginating", count, "in direction", dir);
this._timelineWindow._unpaginate(count, backwards);
this.setState({
events: this._getEvents(),
});
}
},
// set off a pagination request.
onMessageListFillRequest: function(backwards) {
var dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
@ -984,6 +1010,7 @@ var TimelinePanel = React.createClass({
stickyBottom={ stickyBottom }
onScroll={ this.onMessageListScroll }
onFillRequest={ this.onMessageListFillRequest }
onUnfillRequest={ this.onMessageListUnfillRequest }
opacity={ this.props.opacity }
className={ this.props.className }
tileShape={ this.props.tileShape }