Lazy Loading / Virtualization advise.

[BernhardGlueck]

Hi !

We have quite a few datasets that are loaded via our REST API, and that make no sense ( or take to long ) to download completely. For this reason we would like to implement lazy loading ( as we would do in our web frontend )

I simplified our scenario:

interface IMyEndpoint {
    Task<Page<MyItem> LoadPage(int offset,int limit);
}

Page has Limit Items and obviously the total count of results.

Now to achieve that i implemented a custom wrapper collection that implements INotifyCollectionChanged and IList that bascially for each indexing e.g calling this[index] gives back a default MyItem and queues the backend load, while also debouncing etc... and when the results are there fires the approprivate collection changed events. This works quite well in isolation.

Now when i bind this to a list box, it works , but enumerates all the items in my virtual list ( so that i have to load all pages of the backend ) even though the api returns 1000s of items and the listbox can only display maybe 10 in the space it is allowed.

Obviously i replaced the items panel of the list box with a VirtualizingStackPanel

I was under the impression this would only try to render the actually potentially visible items and not go through all of them and the render the subset needed......

Is this scenario supported at all ? What would be other options in Avalonia for this ? ( forgoing explicit pagination of course with some pagination ui )

My frontend deifnition looks like this:

 <ListBox ItemsSource="{Binding Items}" Height="500">
     <ListBox.ItemTemplate>
             <DataTemplate x:DataType="infrastructure:PagingResultItem">
                    <TextBlock Text="{Binding Name}"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel></VirtualizingStackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

[BernhardGlueck]

Ok i think now i am going a bit crazy :-) Just tried the exact same code on Desktop ( Linux ) and in the Browser (WASM)

The above code does the right thing in the browser, but preloads everything on the desktop.......

[thevortexcloud]

This can be done. But you need to restructure your view model a bit and then bind to a task. I asked a similar question a long time ago so I will just link it and the discussion:

#13605

To be clear though, Avalonia's virtualisation only virtualises view items. Meaning it wont try to render anything that's not needed. View model virtualisation is your responsibility to handle.

[BernhardGlueck]

Thank you,

I actually had read your question/answer beforehand.
But the issue ( thumbnail rendering e.a lazy loading some part of your item ) is not the same thing

My question bascially could be rephrased:
Is it by design that virtualizationpanel enumerates all the items in its bound collection first, and then only actually renders e.g 10 out of a 1000 ? Seems quite uneccessary. (as for height it assumes equal height anyway )

Fun part is that in the browser it works exactly as i had envisioned.

[thevortexcloud]

But the issue ( thumbnail rendering e.a lazy loading some part of your item ) is not the same thing

I understood the question was about how to avoid hitting your server so hard. In which case lazy loading will easily solve that. Your server tells you how many items there are, and it sounds like you just want to avoid loading all the items at once. As such you can easily create a collection filled with the required number of dummy items that are lazily loaded when they are moved into view.

Is it by design that virtualizationpanel enumerates all the items in its bound collection first, and then only actually renders e.g 10 out of a 1000 ? Seems quite uneccessary. (as for height it assumes equal height anyway )

Ah, that's more of a question for the core team then. But as far as I am aware it has to so it know how to layout things/estimate scrollbar size. I could be wrong though. I also seem to very vaguely recall Avalonia also expects all bound collections to be an IList (and does not really work properly if they are not one). I am guessing the assumption is that any IList behaves like a regular List, in which case there is generally no downsides to enumerating over everything.

[BernhardGlueck]

Thanks again,

Creating dummy items is a workaround yes, but also for displaying database records ( millions of them ) it is quite some overhead and "should" be uncesseary..

I already have what i call a virtualized collection that implements IList ( the non generic one since that is what avalonia expects ) and INotifyCollectionChanged....

The idea is that when avalonia gets the item with index 100 for example, it returns a dummy item and queues up the load ( minus some details for debouncing etc.. ) so that i don't have to actually store a million items beforehand ( or rather allocate )

The problem is that avalonia seems to go through the hole IList implementation with foreach while it should only get maybe the first 100 items with this[index] ....

And again in the browser it works for some reason :-)

[BernhardGlueck]

Also avalonias virtualizedstackpanel does not work with UNEQUAL sized items, for exactly that reasons, so it does not have to get all of them to render and still estimate scroll bar size etc correctly.