Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Implement virtualization for list views

See original GitHub issue


In provinces with a large number of contacts, the item rendering was delayed while scrolling due to a large number of HTML elements that need to be rendered by the browser.

Expected Behaviour

There should be no blank screen rendered while scrolling the items.

If this is implemented correctly, the Lighthouse scores should have been much better than this:

Screenshot 2021-07-18 at 23 28 33

Additional Information

We can use react-window to implement the virtualization technique in the list.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

andriawancommented, Jul 18, 2021

Oke mas @zainfathoni

Please mention me if you have any issue with this mas @suliskh

andriawancommented, Jul 18, 2021

after forking this repo, you will have copy of this repo on your account. you can start push branch on your copy of repo. github will inform you about PR for this original/upstream repo

cc @suliskh


Read more comments on GitHub >

github_iconTop Results From Across the Web

List Virtualization -
In this guide, we will discuss list virtualization (also known as windowing). This is the idea of rendering only visible rows of content...
Read more >
Building a virtualized list from scratch | by Mark Jordan - Medium
UI “virtualization” is a technique for emulating a list with many elements while only ... you can implement this behavior directly in your...
Read more >
Virtualization in React ListView component - Syncfusion
UI virtualization loads only viewable list items in a view port which will increase ListView performance on loading large number of data.
Read more >
How To Render Your Lists Faster With React Virtualization
Virtualization in React. We will use the react-virtualized package to implement virtualization. At the most basic level, the List component of the ...
Read more >
What I learned from building my own virtualized list library for ...
A virtualized list is a technique where a large list of items in a scrollable view is virtually rendered to only show items...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found