Timeline flickering when paginating forwards(?)

[turt2live]

Description

Unsure if this happens on any other branch besides develop.

When scrolling down, reading the backlog of a room like HQ, the screen occasionally has a fit and scrolls wildly. I'm not sure what the actual steps to reproduce this issue are, but based on anecdotal evidence it appears it has something to do with when the next "chunk" is loaded ahead of me scrolling to that position. It appears as though link previews/images cause a more dramatic effect, if they appear in the newly-loaded section.

Log: not sent (unable)

Version information

• Platform: web (in-browser)
• Browser: Chrome 56
• OS: Windows 10
• URL: riot.im/develop

[lukebarnard1]

I've seen this too, and I highly suspect that is something to do with recent changes to pagination - matrix-org/matrix-react-sdk#785.

FTR I've seen it whilst back paginating. For me, it seems unpagination (from the front) appears to be unpaginating events up to the very bottom of the viewport.

[lieuwex]

FWIW experiencing this too: https://matrix.to/#/!DgvjtOljKujDBrxyHk:matrix.org/$14914957171012721kQmkF:matrix.org

[lukebarnard1]

Just grabbed some logs when some flickering occured:

Scroll event: offset now: 940 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$149140407889ayZgt:matrix.wdg.ovh", pixelOffset: -63}
Scroll event: offset now: 887 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$149140405165776bupSw:matrix.org", pixelOffset: -46}
Scroll event: offset now: 835 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$1491404022122vwtWW:57north.org.uk", pixelOffset: -26}
Scroll event: offset now: 786 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$149140401888VZYFY:matrix.wdg.ovh", pixelOffset: -5}
Scroll event: offset now: 742 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$149140401888VZYFY:matrix.wdg.ovh", pixelOffset: -49}
Scroll event: offset now: 706 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$14914040116316sSxUG:hveem.no", pixelOffset: -15}

^ that was just some scrolling, now for the pagination stuff

ScrollPanel: starting b fill
ScrollPanel: scrolling to token '$14914040116316sSxUG:hveem.no'+-15 (delta: 32)
ScrollPanel: set scrollTop: 738 requested: 738 _lastSetScroll: 738
Scroll event: offset now: 738 _lastSetScroll: 738
Ignoring scroll echo
ScrollPanel: scrolling to token '$14914040116316sSxUG:hveem.no'+-15 (delta: 1424)
ScrollPanel: set scrollTop: 2162 requested: 2162 _lastSetScroll: 2162
ScrollPanel: b fill complete; hasMoreResults:true
Scroll event: offset now: 2162 _lastSetScroll: 2162
Ignoring scroll echo
ScrollPanel: No node with scrollToken '$14914040116316sSxUG:hveem.no'
ScrollPanel: starting b fill
ScrollPanel: starting f fill
ScrollPanel: No node with scrollToken '$14914040116316sSxUG:hveem.no'
ScrollPanel: Already a b fill in progress - not starting another
ScrollPanel: Already a f fill in progress - not starting another
Scroll event: offset now: 0 _lastSetScroll: undefined
ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$149140368660942bFSkn:matrix.org", pixelOffset: 47}
ScrollPanel: Already a b fill in progress - not starting another
ScrollPanel: Already a f fill in progress - not starting another
ScrollPanel: scrolling to token '$149140368660942bFSkn:matrix.org'+47 (delta: -14)
ScrollPanel: set scrollTop: 0 requested: -14 _lastSetScroll: undefined
ScrollPanel: Already a b fill in progress - not starting another
ScrollPanel: f fill complete; hasMoreResults:true
ScrollPanel: Already a b fill in progress - not starting another
ScrollPanel: scrolling to token '$149140368660942bFSkn:matrix.org'+47 (delta: 1684)
ScrollPanel: set scrollTop: 1684 requested: 1684 _lastSetScroll: 1684
ScrollPanel: b fill complete; hasMoreResults:true
Scroll event: offset now: 1684 _lastSetScroll: 1684
Ignoring scroll echo

The difference between that ^ and what happens during a "normal" backward pagination is that No node with scrollToken '$... appears when the bug occurs.

Including logs from the timeline panel: (interesting bit being " Unpaginating 104 in direction f", which confirms my theory of loads of events being unpaginated from the front. whether this is a higher number than normal / too many events, I don't know)

Scroll event: offset now: 427 _lastSetScroll: 427
rageshake.js:63 Ignoring scroll echo
rageshake.js:63 ScrollPanel: starting b fill
rageshake.js:63 TimelinePanel: Initiating paginate; backwards:true
TimelinePanel.js:223 Timeline.shouldComponentUpdate: state change
rageshake.js:63 state before: Object {events: Array[93], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 state after: Object {events: Array[93], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 ScrollPanel: scrolling to token '$1491479992808951ZswLG:matrix.org'+-101 (delta: 32)
rageshake.js:63 ScrollPanel: set scrollTop: 459 requested: 459 _lastSetScroll: 459
rageshake.js:63 ScrollPanel: Already a b fill in progress - not starting another
rageshake.js:63 Scroll event: offset now: 459 _lastSetScroll: 459
rageshake.js:63 Ignoring scroll echo
rageshake.js:63 ScrollPanel: Already a b fill in progress - not starting another
rageshake.js:63 TimelinePanel: paginate complete backwards:true; success:true
TimelinePanel.js:223 Timeline.shouldComponentUpdate: state change
rageshake.js:63 state before: Object {events: Array[93], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 state after: Object {events: Array[113], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 ScrollPanel: scrolling to token '$1491479992808951ZswLG:matrix.org'+-101 (delta: 1818)
rageshake.js:63 ScrollPanel: set scrollTop: 2277 requested: 2277 _lastSetScroll: 2277
rageshake.js:63 ScrollPanel: b fill complete; hasMoreResults:true
rageshake.js:63 Scroll event: offset now: 2277 _lastSetScroll: 2277
rageshake.js:63 Ignoring scroll echo
rageshake.js:63 ScrollPanel: set scrollTop: 1909 requested: 1909 _lastSetScroll: 1909
rageshake.js:63 ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$1491473851757039lMFGV:matrix.org", pixelOffset: 36}
rageshake.js:63 Scroll event: offset now: 1909 _lastSetScroll: 1909
rageshake.js:63 Ignoring scroll echo
rageshake.js:63 TimelinePanel: unpaginating events in direction f
rageshake.js:63 TimelinePanel: Unpaginating 104 in direction f
TimelinePanel.js:223 Timeline.shouldComponentUpdate: state change
rageshake.js:63 state before: Object {events: Array[113], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 state after: Object {events: Array[9], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 ScrollPanel: No node with scrollToken '$1491473851757039lMFGV:matrix.org'
rageshake.js:63 ScrollPanel: starting b fill
rageshake.js:63 TimelinePanel: Initiating paginate; backwards:true
rageshake.js:63 ScrollPanel: starting f fill
rageshake.js:63 TimelinePanel: Initiating paginate; backwards:false
TimelinePanel.js:223 Timeline.shouldComponentUpdate: state change
rageshake.js:63 state before: Object {events: Array[9], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 state after: Object {events: Array[9], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 ScrollPanel: No node with scrollToken '$1491473851757039lMFGV:matrix.org'
rageshake.js:63 ScrollPanel: Already a b fill in progress - not starting another
rageshake.js:63 ScrollPanel: Already a f fill in progress - not starting another
rageshake.js:63 Scroll event: offset now: 166 _lastSetScroll: undefined
rageshake.js:63 ScrollPanel: saved scroll state Object {stuckAtBottom: false, trackedScrollToken: "$1491468321712909qytBI:matrix.org", pixelOffset: 13}
rageshake.js:63 ScrollPanel: Already a b fill in progress - not starting another
rageshake.js:63 ScrollPanel: Already a f fill in progress - not starting another
rageshake.js:63 TimelinePanel: paginate complete backwards:false; success:true
TimelinePanel.js:223 Timeline.shouldComponentUpdate: state change
rageshake.js:63 state before: Object {events: Array[9], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 state after: Object {events: Array[29], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 ScrollPanel: scrolling to token '$1491468321712909qytBI:matrix.org'+13 (delta: 0)
rageshake.js:63 ScrollPanel: Already a b fill in progress - not starting another
rageshake.js:63 ScrollPanel: f fill complete; hasMoreResults:true
rageshake.js:63 ScrollPanel: Already a b fill in progress - not starting another
rageshake.js:63 TimelinePanel: paginate complete backwards:true; success:true
TimelinePanel.js:223 Timeline.shouldComponentUpdate: state change
rageshake.js:63 state before: Object {events: Array[29], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 state after: Object {events: Array[49], timelineLoading: false, canBackPaginate: true, canForwardPaginate: true, readMarkerVisible: false…}
rageshake.js:63 ScrollPanel: scrolling to token '$1491468321712909qytBI:matrix.org'+13 (delta: 1843)
rageshake.js:63 ScrollPanel: set scrollTop: 2009 requested: 2009 _lastSetScroll: 2009
rageshake.js:63 ScrollPanel: b fill complete; hasMoreResults:true
rageshake.js:63 Scroll event: offset now: 2009 _lastSetScroll: 2009
rageshake.js:63 Ignoring scroll echo
rageshake.js:63 ScrollPanel: scrolling to token '$1491468321712909qytBI:matrix.org'+13 (delta: 478)
rageshake.js:63 ScrollPanel: set scrollTop: 2487 requested: 2487 _lastSetScroll: 2487
rageshake.js:63 Scroll event: offset now: 2487 _lastSetScroll: 2487
rageshake.js:63 Ignoring scroll echo
6rageshake.js:63 ScrollPanel: scrolling to token '$1491468321712909qytBI:matrix.org'+13 (delta: 0)

[lukebarnard1]

No node with scrollToken '$1491473851757039lMFGV:matrix.org' would indicate that the node that was being tracked has been unpaginated. And the glitch is actually only occurring when any unpagination is done. This means it's the logic in _checkUnfillState that was awry.

I hypothesised that we were starting at the wrong end of the timeline when unpagination, which meant that all the tiles that should have been unpaginated were actually being kept. Or something like that...

Anyway, the fix is one ! as is typically the case..

[lukebarnard1]

This is still an issue. For a split second, the entire timeline appears unpaginated. It would be nice if we didn't have to worry about two sides of the same coin - the timeline recovers purely because pagination is reasonable. Maybe we should unpaginate all events (virtually) and allow the pagination to give us a range of events centred around the event being tracked.

Our auto-deploy was down :)

[lieuwex]

Can confirm, my issue is fixed! 🎉