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

Description

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.

https://user-images.githubusercontent.com/6315466/126053922-3feed848-5b3d-4096-bb42-13b6e983832d.mp4

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:

Additional Information

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

Issue Analytics

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

Top GitHub Comments

3reactions

andriawancommented, Jul 18, 2021

Oke mas @zainfathoni …

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

1reaction

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

Top Results From Across the Web

List Virtualization - Patterns.dev

In this guide, we will discuss list virtualization (also known as windowing). This is the idea of rendering only visible rows of content...

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...

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.

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 ...

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...