[List]: Optimize performance when there is lots of items in a list

Open
#7,243 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript

Research direction

Start by reproducing the slow scrolling and high resource use with a List containing 10,000 items, then inspect the existing loadMore event behavior and the referenced UI5 list optimization. Compare the behavior with tables as suggested. Done should mean dynamically loading visible items plus nearby items while unloading hidden ones, without requiring pagination.

Written by the indexing model from the issue text.

Description

feature request Medium Prio TOPIC P
Feature Request Description

Currently, when you have lots of items in a list (you can test with 10000 items for example, maybe less), the UX is pretty poor. Scrolling in the list is slow and the list requires lots of resources. I haven't tested it but I think the UX is the same on tables.

Proposed Solution

An optimisation could be done to load dynamically items in the list. Something like loading the displayed items and some on top and bottom of them and loading new items (and unloading freshly hidden ones) when the user scrolls. I think this optimisation has been done a long time ago on UI5 list object.

Proposed Alternatives

No other idea

Organization

SAP

Additional Context

As I said, we can have a huge list of items and we can't paginate them (not a good UX to implement paginated list in a panel). Currently, I fill the list with the loadMore event but when I have lots of items, it's not really usable.

Priority

Medium

Privacy Policy
  • I’m not disclosing any internal or sensitive information.
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from UI5/webcomponents

All issues in UI5/webcomponents

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.