UI flicker when scrolling up with prepend

[Exocomp]

Steps to reproduce

• Go to https://rintoj.github.io/ngx-virtual-scroller/
• Click Samples
• Under WITH SINGLE COLUMN
• Scroll down a bit so you are not all the way at the beginning
• Click 'Prepend 10 items'
• The UI shows the top most record and then back to where it was creating a flicker

This is probably an expected behavior however would you be able to provide your thoughts on why this occurs and some ideas you might have on how to go about fixing it so that there is no flicker in the scenario mentioned above.

Use Case: With a chat application new records are at top usually, when a user scrolls up old records are retrieved from the server and prepended - getting the flicker is not a good user experience and it would be great if it can be figured out how to avoid.

[Exocomp]

I had a chance to look into this a bit more today and here is what I see, please let me know if it is inline with your understanding.

• When the scrollbar is not at the start position
• When items are prepended to the list of items
  • It causes the virtual scroller to display the newly added prepended items

There is a function called refreshCompletedCallback which then scrolls to the previous position:

if (!itemOrderChanged) {
	this.scrollToPosition(this.previousViewPort.scrollStartPosition + scrollLengthDelta , 0, oldRefreshCompletedCallback);
	return;
}

The issue this causes is that the items at the position it is scrolling have not been rendered yet so there is a brief flash of white on the screen. It is very brief but it adds to the flicker.

To mitigate the flicker, I tried the following:

setTimeout(() => {
	this.scrollToPosition(this.previousViewPort.scrollStartPosition + scrollLengthDelta , 0, oldRefreshCompletedCallback);
}, 0);

The timeout gives enough time for the items to be rendered by the time it scrolls to where it left off.

This solves the brief "white" flicker however there is still a small flicker that the scrollToPosition causes as it jumps from the previous position to the new position.

What I would like to do is find a way to make the items stay where it is even though new items have been prepended and only have the scroller bar on the side itself move.

Basically the functionality of appending items but in the opposite direction for prepend.

It will really enhance the user experience.

Is what I envision possible, your thoughts please?