As people are added, the site is becoming sluggish and slow to load

[transiient]

Not sure what could be done about this but I've just noticed it. With the amount of people who are in the list now, the website loads up quite slowly.

Could lazy-loading be implemented somehow?

[wesbos]

How is it slow? Scrolling? Images loading? rendering?

[transiient]

Using Firefox, these are the network stats I got:

262 requests
3.86 MB / 1.99 MB transferred
Finish: 11.96 s
DOMContentLoaded: 4.97 s
load: 11.53 s

A lot of the request were avatar URLs - these could possibly be minimised by only loading when they're in the viewport.

Filtering is also extremely slow for me but that could be due to my system (dual core i3).

[wesbos]

Yeah almost all of that is image requests. I'll add lazy loading, looks like it will be added to firefox soon so its a good solution.

Filtering does have a few MS of lag for me too. Likely in the React render. Anyone want to take a look at this?

[wesbos]

ee7be1d

[wesbos]

You can tell the lag is in the render because when we filter for small numbers, it's fast.

I bet we can just hide people instead of re-rendering each time. Let me try that..

[wesbos]

I goofed around with it for a bit yesterday but I don't think hiding it is the issue..

If anyone is good ith the profiler on react dev tools, please take a look. It very clearly shows that the render for the large tags( 150+ people) takes ~300ms which is way too long

[iamandrewluca]

Notes:

• https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists

[transiient]

This, from your link, looks incredibly promising, and I don't see it being too difficult to implement. Seems like it'll just take a few lines. I'll play around.

[iamandrewluca]

Or maybe infinite pagination can be added.
https://www.gatsbyjs.org/docs/adding-pagination/

[jonaskuske]

I think the easiest (potential) fix would be to apply content-visibility and contain-intrinsic-size in CSS, so only the visible parts are rendered by the browser: https://web.dev/content-visibility/