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.
UI Consultant, Maker & Technical Writer.
I write about JS, TS, Rx, Angular & all things Front End
🇮🇹🇬🇧
Follow me on Twitter: https://twitter.com/gc_psk
Founder of https://makerkit.dev
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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:
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.