Awaiting for some time in the ItemsProvider method in the Virtualize component and the user scrolling leads to unpredictable scrolling behaviour

[ben-goldie]

Description

When a user scrolls using the scrollbar in the Virtualize component when awaiting (Task.Delay) is performed in the ItemsProvider method the scrollbar moves unpredictably.

When the awaiting (Task.Delay) is removed when a user scrolls using the scrollbar then the scrollbar moves as expected.

When the awaiting is done it appears to cancel ItemsProvider call via the CancellationToken. Perhaps I am not handling the cancelling request appropriately. Please see the reproduction steps.

Reproduction Steps

1. Extract the ItemsProviderReproduction.zip ItemsProviderReproduction.zip
2. Open the ItemsProvider.sln
3. Run up the application
4. Scroll the Virtualize component several times, wait a few seconds between some scrolls so that the 1 second task delay on the simulated service calls can completed and display items
5. Notice that occasionally the scrollbar will jump forward and back unpredictably which is not expected. Also notice that the numbered item (which are sequential) will also confirm that it is scrolling unpredictably.
6. Open Home.razor and go to line 56 and comment out the await Task.Delay
7. Run up the application
8. Scroll the Virtualize component several times, notice that no unpredictable scrolling is observed.

Expected behavior

Scrolling with awaiting Task.Delay should not lead to unpredictable scrolling.

Actual behavior

When scrolling with the await occasionally the scrollbar will jump forward and back unpredictably which is not expected. Also notice that the numbered item (which are sequential) will also confirm that it is scrolling unpredictably.

Regression?

I have not tried in previous versions

Known Workarounds

Don't await in the ItemsProvider call, instead return loading items and previously loaded total and use a ContinueWith on the service task and update the items when the service task resolves.

Configuration

.NET 8 windows 11

Other information

I think it is related to how cancelled ItemsProvider requests are handled.

[javiercn]

@ben-goldie thanks for contacting us.

Please provide the project repro as a public github repository.

[maritogram]

Able to reproduce, here's the repo (the zip basically): https://github.com/maritogram/ViirtualizedAsyncItemsProvider

[ben-goldie]

Thank you for the help @maritogram !

[maritogram]

It seems that if the spacer elements used by the Virtualization component have a width of 0 the overflow of the parent flex container will "ignore" them. This makes the overflow size (?) of the scrollable component not match the actual item count of the Virtualization component - which I bet causes a bunch of weird behavior. [Or something along those lines]

Anyway, adding any kind of width to those spacers seems to fix it (.container > div { width: 1px;}) , or you could also remove align-items: center; from the flex container, as it causes the inner divs to not inherit its parent content-width for some reason?

Note: There seem to be other issues related to scrolling too quickly. I think that's what truly causing that erratic scrollbar behavior, not sure why yet.