Prevent a flash of empty content on the library page

[andrew-codes]

My Library page loads with all game data already. However, it does not load with rendered games. This causes a longer delay from when the page loads and when the user can see the actual content (games) of the page. The current (technical) issue is that the games grid is virtualized. This means that only games within view are actually rendered. In order to accomplish this, the games grid must have a known height value when rendering. However, given the game grid fills the remainder of the page, we must know how tall that space is. On the client, after page load, we can compute this value, but on the server, in order to do SSR, we do not have a way to know how tall the area should be.

Ideally, the solution is to figure out how to work around this limitation and render the game grid via SSR. An alternative and acceptable solution is to load a skeleton UI to indicate the games are loading. Note that if the games are able to be loaded too fast, the skeleton UI may make it seem (perceived performance) to be slower. If this affect is too great and we cannot SSR due to technical reasons, then we may forfeit this feature.