Battle list is laggy with no filters and lots of battles

beyond-all-reason / bar-lobby

BAR Lobby Client

https://beyond-all-reason.github.io/bar-lobby/

MIT License

33 stars 30 forks source link

Battle list is laggy with no filters and lots of battles #192

Open Jazcash opened 1 year ago

Jazcash commented 1 year ago

Scrolling up and down this isn't a fun time (~250 battles atm). We should either paginate it or use https://primevue.org/virtualscroller

dusekj4 commented 1 year ago

will look into it

Jazcash commented 1 year ago

Looked into this to give you some notes, found that the DataTable component has a virtualScrollerOptions prop which would solve this issue, if it wasn't for the fact we're not actually using the datatable's built-in scroll functionality. if you add scrollable :scrollHeight="'500px'" and remove the scroll-container parent div, you'll see the datatable's scroll. Only problem with that is it doesn't grow to fill the remaining space and seems to require a fixed height value. Also the table's headers overlap with the rows because of the semi-transparent styling.

Jazcash commented 1 year ago

ack sorry I just ended up doing this 😬

Jazcash commented 1 year ago

Gonna reopen this because I've just noticed it lagging again, though it was much smoother the other day, even though I tripled the data when testing it. I'm also not too satisfied with this virtual scrolling part of DataTable in general - it jumps around quite a bit (probably when the data updates), sometimes scrolls back to the top, isn't the smoothest thing ever, the headings have to have solid colour background because the data is underneath...

ice_video_20230423-234525.webm

Tempted to paginate for now. In the long-run, we should expect this list to (hopefully) be much smaller when (if) people use matchmaking instead. Private battles should also eventually be hidden when we have better ways for friends to join each other or send out invites.