Broken out from T402973:
Background
We want to introduce loading indicator/placeholder UI to the carousel state when it's shown
User story
As a user with a slow connection, I want to know when the feature is loading without the page shifting around
Requirements
Introduce loading indicator UI:
- Carousel entry point (ideally we also do this in a way that the content doesn't "jump" after the carousel appears – may need a small amount of server-side CSS to achieve this in a seamless way)
Design
- Carousel entry point
Acceptance criteria
- Build out loading indicators according to the designs above
- test on the merged patch:
- confirm that space is reserved and fills in nicely on pages with enough images
- confirm that space is reserved, then the rectangle "rolls up" out of the way quickly on pages without enough images
- in browser with JavaScript disabled, confirm that the space is initially collapsed and stays that way
- test on the merged patch:
Notes
Patch should appear in 1.45.0-wmf.25 next week; if we need it in a hurry we may need to do backports.
For the Carousel loading state, we might need something that is CSS-only, since this deals with part of the page that is immediately visible to the user even before JS initializes.
Because we need to know whether the 3-image minimum will be reached to create a placeholder, we may need to calculate this on the PHP side as well. (This stretch goal was not implemented, we create the placeholder unconditionally and have it 'retract' as soon as it's able to calculate that there aren't enough images. This was considered less disruptive than having the content shift down due to a surprise opening, and didn't require reimplementing the exclusion checks in PHP.)
