A single render (after switching tabs) takes ~59ms on my PC. It's longer on mobile, and definitely noticeable. We should make it faster.
I tried to factor out a <VolunteerStatusListItem> component from <VolunteerListItem> with a far flatter (and simpler) child-component structure. This decreased rendering time to ~48ms (-18.6%), which is still too long, and not worth that duplication.
We should probably lazily render the components in the list. No more than 12 volunteers are visible at any one time, which should decrease rendering time to ~14ms, or ~12ms if we decide to split the components up after all. The one thing to keep in mind is that the list should continue to be responsive when (quickly) scrolling down the page.
A single render (after switching tabs) takes ~59ms on my PC. It's longer on mobile, and definitely noticeable. We should make it faster.
I tried to factor out a
<VolunteerStatusListItem>component from<VolunteerListItem>with a far flatter (and simpler) child-component structure. This decreased rendering time to ~48ms (-18.6%), which is still too long, and not worth that duplication.We should probably lazily render the components in the list. No more than 12 volunteers are visible at any one time, which should decrease rendering time to ~14ms, or ~12ms if we decide to split the components up after all. The one thing to keep in mind is that the list should continue to be responsive when (quickly) scrolling down the page.