Implement virtualization for list views

kawalcovid19 / wargabantuwarga.com

Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan dan alat kesehatan untuk COVID-19.

https://www.wargabantuwarga.com

MIT License

555 stars 166 forks source link

Implement virtualization for list views #125

Open zainfathoni opened 3 years ago

zainfathoni commented 3 years ago

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.

suliskh commented 3 years ago

Could I work on this, Mas?

zainfathoni commented 3 years ago

Yes, of course. Thanks for the initiative!

Please go ahead. Don't forget to submit a Draft Pull Request soon to signal other contributors that you have started working on it. 😉

suliskh commented 3 years ago

Hi mas @zainfathoni, I am having a difficulty while trying to make a draft PR (pic attached). I can successfully pull, but cant push to the origin.

What I have done:

Checked the ssh-key. It's matched.
Used https instead of ssh
Recloned the repo

Nothing works for me. Also, I have no problem push/pull to another repo. Would you help me with that? :sungkem:

zainfathoni commented 3 years ago

Hi Mas @suliskh, you can't push directly to this repository, because you don't have write permission to this repository. What you (and all other contributors) should do is forking this repository into your own repository and submit a PR from your repository to this repository.

You can read more about Forking Projects here.

@andriawan could you please assist him if he has any further issues?

andriawan commented 3 years ago

Oke mas @zainfathoni ..

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

andriawan commented 3 years ago

FYI mas @suliskh

andriawan commented 3 years ago

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

suliskh commented 3 years ago

Halo mas @zainfathoni and mas @andriawan, thank you for guiding me and I've managed to make a PR(#134) with some caveat that I can't fix. Would you mind looking into that? Please see the "Caveat" section. Thank you :sungkem: