The <Heroprint> component shows the fingerprint of the given country in terms of the
hero visualization wheel.
… Fingerprint – Heroprint, get it?
The Heroprint component has a fixed size of 128x128px.
The component renders the fingerprint lazily. Only once the element enters the viewport, the fingerprint becomes visible. Rendering the fingerprint is somewhat expensive (the data from the GD_DISTANCES_DEV cube need to be fetched and transformed). Without this lazy rendering it would be very expensive to display the countries page.
The code uses IntersectionObserver to detect when the element enters the viewport.