ui5-webcomponents
ui5-webcomponents copied to clipboard
SAP
ui5-list infinite scrolling performance issue on tablet
Bug Description
Using the ui5-list scrolling with 846 entries on an ipad pro (latest model), the dom rendering slows noticeable down. It gets slower and slower, scrolling deeper.
https://btp.udina.de/development/api-explorer.html
The list is directly bound against an data array and i am not using load-more event. Even load more would just add entries and enlarge dom, but not solve quick scrolling in both directions.
Even the usability of the load-more example is stuttering while adding data which maybe can only be solved with ahead preloading outside the visible area.
Are there any plans, to solve this inside the control like vue3-infinite-list does?
Best regards Holger
Hello @hschaefer123
Our list is purely declarative unordered list element. We handover the whole performance responsibility to the wrapper technology (being it React, Angular, Vue, etc).
Currently, we do not have plans to provide such a "smart" list (@ilhan007 correct me if I am wrong, please).
Best Regards, Martin
Hi Martin, i just tried to use load-more with 1.6.0, but i do not got the event.
At the end of my computed filter, i returned the sliced array. At the end, the load-more event is not fired?
Using Button mode, the event is working well and i can increase the number of data that should be returned in filter function.
Is this scroll event also working, if your list is attached a data array? The infinite scroll example is adding list entries directly.
Best regards Holger
Hello @SAP/UI5-webcomponents-topic-p,
The question is regarding ui5-list web component and I think that the issue is forwarded to our component by mistake. Could you please look over?
Kind Regards, Niya
Hi @hschaefer123,
have you set height to the list and the growing="Scroll"?
If so, could you try and extend it with your use case in order to reproduce the issue: https://codesandbox.io/s/ui5-webcomponents-forked-uiqbgi?file=/index.html
Restrictions: growing="Scroll" is not supported for Internet Explorer, on IE the component will fallback to growing="Button".
Kind Regards, Dobrin
@dobrinyonkov this is purely a scrolling issue on safari. If you open the original link in safari you can clearly see it, even on a fast Mac: https://btp.udina.de/development/api-explorer.html
On chrome it scrolls very fast, on safari there is some jerking. A timeline recording shows no JS or layouting activity, but the CPU is at 100%.
Closing this based on the research above, as scrolling issue with safari. If you still find problems with the component, re-open this issue.