Skip to content

Introduce a visual indicator that there's content to be lazy loaded #1829

@MadaraUchiha

Description

@MadaraUchiha

In the case of <amp-ad> and <amp-embed>, (and probably most other lazy-loaded elements) it's not possible to provide some sort of visual indication that there's something that's supposed to go into the space.

In the case of bad data connectivity or signal, ads, embeds, images, etc can take a longer time to load, and since they're loaded lazily (and rightly so), it could make the perceived performance of the page worse (because there's a blank, potentially large, square where content is supposed to be, and there's no indication that something should be there).

I've read the argument that at least in the case of amp-img one may elect to use a background-color but that doesn't hold when transparent .png (or 😨 .gif) images are in play. As it would affect how those images look after they're loaded and rendered.

I'm proposing to think about some sort of visual indicator (I'm thinking about a simple spinner in a data URI, but you guys are probably smarter than I am) that would tell the user that something is, in fact, queued to be rendered in the blank square he's looking at.

Maybe something like

<amp-embed
  <!-- snip -->
  hide-spinner <!-- enabled by default? TBD -->
/>

Or even

<amp-embed <!-- attributes --> >
  <amp-spinner />
</amp-embed>

What do you think? Is this worth thinking about? Are there plans for this or was it ever discusseed before (I didn't find anything from a search).


Is this option available already under a different name? Looking at the docs/examples I couldn't find anything.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions