Virtualized lists

[metonym]

Another basic feature for component libraries and UI engineering: virtualized lists.

For a large number of items, only a window of items should be rendered in the DOM for performance. This could benefit:

• DataTable
• ComboBox
• MultiSelect
• Dropdown

For Carbon, there are a prescribed list of item heights based on size (e.g., "sm" or "lg"). This is a great starting point. It grows more complex with items that are dynamically rendered.

Draft: #2270

Related: https://github.com/carbon-design-system/carbon-components-svelte/issues?q=is%3Aissue%20state%3Aopen%20label%3Avirtualization

[brunnerh]

At least in DataTables you can easily run into dynamic heights just from text wrapping alone.

[Sheepux]

Not sure if it helps, here is how i did it (svelte5).
I was using some svelte lib for virtual list but in the end i was not satisfied as i was encountering too many "small issues" .
https://github.com/manga-download/haruneko/blob/master/web/src/frontend/classic/lib/VirtualList.svelte
I've used a padding-top to clear out of view items

<div class="spacer" style="height: {spacerHeight}px; padding-top:{emptySpaceHeight}px" tabindex="-1">
  {#each slice as item (item) }
    {@render children?.(item)}
  {/each}
</div>

component is called here
https://github.com/manga-download/haruneko/blob/master/web/src/frontend/classic/components/MediaSelect.svelte#L279-L287

        <VirtualList items={filteredmedias as MediaContainer2[]} itemHeight={24} container={medialistref} containerHeight={medialistrefHeight}>
            {#snippet children(item)}
                <div class="media">
                        <Media 
                        media={item}
                        /> 
                </div>
            {/snippet}
        </VirtualList>

not perfect, but does the job in a few lines

[slidenerd]

Render large lists where each item can be of fixed or variable height without hardcoding these heights

Here is a full implementation that uses no libraries from Vue 2

Most importantly needs to support variable item heights without hardcoding the heights

[metonym]

Thanks all for the feedback.

It seems that virtualization, if implemented, must support dynamic heights as a table-stakes feature.

[Sheepux]

Yeah I also did try to do it by getting the dynamic size of the first element on list load, but in the end it was too complex (adding edge cases) and I went with the easy solution of having a fixed height