web-components
web-components copied to clipboard
vaadin
[combo-box] Allow limiting how many pages can remain loaded at the same time
Describe your motivation
There is a logic in the ComboBox counterpart's connector that prevents it from keeping too many pages loaded in memory in case of really large lists with thousands of items in order to maintain page memory consumption at a reasonable level.
I guess it would be nice to have it implemented in the web component instead as large lists are not only common to Flow apps.
Moving this feature into the web-components repo is also expected to improve the feature's test coverage as its current coverage in the flow-components repo is rather poor.
How it is implemented in the Flow counterpart
https://github.com/vaadin/flow-components/blob/e39333b546d606aedc12b8c905fa2a3657cd8d45/vaadin-combo-box-flow-parent/vaadin-combo-box-flow/src/main/resources/META-INF/resources/frontend/comboBoxConnector.js#L134-L148
Basically, the connector defines the max amount of pages that can remain loaded in filteredItems at the same time which forms a range of active pages. Once reached the max, this range moves back and forth with scrolling, always containing the currently visible pages. When any page turns out to be out of the range, the connector replaces all of its items with placeholders to unload the page from memory.
Page requests are handled in two ways depending on whether the page request has been sequential or jumping over several pages:
A sequential page request:
- If the request pulls the range down it stops requests to the pages above the range or unloads them if they have been loaded already.
- If the request pulls the range up, it stops requests to the pages below the range or unloads them if they have been loaded already.
A jumping page request:
In this case, the range is simply reset and all the previously loaded pages are unloaded = replaced with placeholders.
Possible API
Introduce a maxActivePagesCount property for combo-box that would control how many pages can be loaded. To not affect the current behavior, the feature can be disabled by default = the property is null.
As @tomivirkki pointed out, this feature can be also useful for Grid as it also supports data providers. With this in mind, it would make sense to offer this feature as a wrapper around the data provider:
comboBox.dataProvider = createCachedDataProvider((params, callback) => ..., { maxActivePagesCount: 5 })
Ideally, this wrapper would encapsulate everything related to caching items, so maxActivePagesCount would be just one of the configuration options.
