Possibly improve the loading skeleton for the Primary Hero element

bobsilverberg commented 5 years ago

This is a follow-up to mozilla/addons-frontend#8678.

There are a couple of issues with the loading skeleton for the Primary Hero element that we may or may not be able to address:

The min-height for the element is defined in order to allow the loading skeleton, which doesn't have real content, to be the same size as the final element. The min-height is based on a best guess of what content a Primary Hero is likely to have, which was discussed with devaneymoz. If the add-on name and/or the description is larger than the area we have allowed, then the loading skeleton will not match up with the final version and the transition will look "jumpy". I'm not sure if there's much we can do about this because when the skeleton is displayed during loading we do not know what the content of the final element might be.
The min-height defined also include space for the site notices. Similar to the issue above, we have had to make a best guess at how large the site notices area will be, in order to set a min-height for the skeleton both for a version with and without the notices. Ideally we wouldn't have to do this at all, and the site notice could just "push everything down", but the current implementation does not allow that to work. It's possible that changing some of the markup and/or css might allow us to do that, which should also solve the problem of not knowing how big it needs to be.

┆Issue is synchronized with this Jira Task

willdurand commented 5 years ago

I am wondering whether using CSS transitions to smooth/absorb the jumpiness would work, WDYT?

bobsilverberg commented 5 years ago

I am wondering whether using CSS transitions to smooth/absorb the jumpiness would work, WDYT?

It might. Things will still move around on the page (potentially), but it might make things a bit better.

KevinMind commented 6 months ago

mozilla / addons