FR: wait until item has loaded before advancing

[samouri]

Description

Certain components like <amp-carousel>, <amp-base-carousel>, and <amp-story> have the capability to automatically advance through items on a timer. For certain combinations of network, cpu, and timer intervals, it is possible that we transition items even before the current one has finished loading.

Each of these components should ensure the subresources within a slide (i.e. images) have loaded before advancing. Otherwise it is poor for both UX and web-vitals. I don't know whether or not we already do this, or if there are more components that can benefit from this change. Hopefully folks on @ampproject/wg-components and @ampproject/wg-stories can help me out.

• [ ] amp-story
• [ ] amp-base-carousel
• [ ] amp-carousel

---

Related: https://bugs.chromium.org/p/chromium/issues/detail?id=1249622

[caroqliu]

• amp-carousel[type=slides] 0.1 does not wait for loading before auto advancing, only whether it's in viewport: https://github.com/ampproject/amphtml/blob/9b97955c198f29d545780c79d9c742185b19f2e3/extensions/amp-carousel/0.1/slidescroll.js#L347-L349 One potential bug is that toggling on autoplay via the toggleAutoplay action doesn't even look at viewport visibility: https://github.com/ampproject/amphtml/blob/9b97955c198f29d545780c79d9c742185b19f2e3/extensions/amp-carousel/0.1/slidescroll.js#L1072-L1074
• amp-base-carousel 0.1 (and, by extension, amp-carousel[type=slides] 0.2) also does not wait for slide load: https://github.com/ampproject/amphtml/blob/9b97955c198f29d545780c79d9c742185b19f2e3/extensions/amp-base-carousel/0.1/auto-advance.js#L201-L209
• amp-base-carousel 1.0 / bento-base-carousel / BentoBaseCarousel do not wait for slide load: https://github.com/ampproject/amphtml/blob/9b97955c198f29d545780c79d9c742185b19f2e3/extensions/amp-base-carousel/1.0/component.js#L157-L169 This should probably be updated to use the new useIntersectionObserver hook to only auto advance when in viewport, similar to how the other versions behave. 🐛

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.