loading...

re: 3 Ways to Render Large Lists in Angular VIEW POST

FULL DISCUSSION
 

One other way:

Don't render 1000 items.
Render only first 100 and add a load more button. If the user wants to load more then they need to click on the button and render the next 100. Simple and easy.

 

Pagination or your solution are definitely other viable ways - but present the same usability limitations as virtual scrolling.

In my case, this was not an option: I have to render thousands of fonts within a dropdown. No other solution has a "click here to load more fonts" button - so I'd be at a disadvantage. This would definitely be a UX limitation for my users.

At the end of the day:

  • do you need to display everything? The solutions above may work
  • do you not? Great! Pagination and Load More could definitely be a solution too
 

You can replace the load more button with a Visibility trigger or a component that calls a callback when the element is in view port, Then, you will trigger a load more action automatically.

Code of Conduct Report abuse