wip: virtualized vax list

tibudiyanto / jakarta-vax-availability

jakarta-vax-availability.vercel.app

100 stars 46 forks source link

wip: virtualized vax list #73

Closed pveyes closed 3 years ago

pveyes commented 3 years ago

resolve #67

Implement virtualized list using VariableSizeGrid with 2 column. This is currently hardcoded as we probably need some kind of media query to switch to single column grid (still not sure the best way to handle this)

Some notes

Grid height is calculated based on number of schedule available in the vax location
We use the filteredSchedule itself as key to make sure that the virtual list re-renders on query change

To do

[ ] make it responsive
[ ] put footer back / remove entirely

Trade Off

Footer must be fixed / removed entirely
Scroll not on body

Before

After

also resolve #70

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tibudiyanto/jakarta-vax-availability/CAFx18JGaiZ6G8gD8ernw1MgAYX3
✅ Preview: https://jakarta-vax-availability-git-virtual-list-tibudiyanto.vercel.app

sonnylazuardi commented 3 years ago

https://codesandbox.io/s/rcv-rwd-x6lvc?fontsize=14&hidenavigation=1&theme=dark this might be helpful for responsive layout

resir014 commented 3 years ago

We might be able to use something like Simplebar to create a custom scrollbar that looks better than the default one, if we can't move it out of the center of the body.

Otherwise, we might have to improve our application shell UI.

pveyes commented 3 years ago

decided to ship client-side pagination instead. The trade off of using virtualized list is not favorable