Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
- Source code on GitHub
Another addiction for the card page sidebar. Now, if the card has votes, the entire list of voters can be consulted.
Two forms of lazy/on-demand data fetching was employed.
First, voters data is not fetched until the widget is expanded(the number of votes comes down with the other card data).
Second, for the avatar images. Some cards can have a massive number of voters(see links below) so this would mean asking the browser to throttle the loading of hundres of (tiny) images, even if they will not never be watched by the user because they are beyond the fold of the widget.
So avatar images are only requested when they ‘enter’ in the widget vieport during scrolling.
This feature is implemented in the Body component, a subcomponent of the Voters component that handles the rendering of the voters. The core of the code is in the uncover() method, invoked when the voters are displayed the first time and then on every container scroll (debounced)event, where unloaded avatars vertical positions are compared with the new y coordinate of the bottom of the viewport.
This uncovering process is performed even on the window resize event simply because the widget body has a CSS max-height specified with viewport coordinates(vh).
The widget header layout is implemented with Flexbox.
Here are some testing cards: