Amphtml: [MASTER FEATURE] New default loaders for AMP

[nainar]

New loaders that indicate an image or embedded feature is loading will be utilized in AMP and are in the process of being built. A current 3-dot loader exists. This issue also encompasses the research necessary to determine whether redesigns will be received favorably by comparison.

cc @aghassemi @andrewwatterson

[nainar]

Context here: #3830

[nainar]

Loaders design principles

• Based on User Research Studies, we noticed that staged loaders (loaders that can be broken up into discrete stages) performed the best on the metrics of user happiness and their perception of how long the loader takes.
• Based on this insight we designed stage loaders for All components that make a server request to initialize.
• The loaders are split into 3 stages: nothing, the context loads (Ad, Facebook logo, etc) and lastly the spinner spins round the central badge.

Loaders proposal

Generic loader

Small

Without image placeholder

With image placeholder

Default size

Without image placeholder

With image placeholder

Content specific loader

Video loader

Without image placeholder

With image placeholder

Ads loader

Without image placeholder

With image placeholder

Twitter loader

Without image placeholder

With image placeholder

Pinterest loader

Without image placeholder

With image placeholder

Instagram loader

Without image placeholder

With image placeholder

Facebook loader

Without image placeholder

With image placeholder

cc @andrewwatterson @aghassemi

Paging @cramforce @rudygalfi @cpapazian @paularmstrong

[cramforce]

I ❤️ all of these! Can't wait to get rid of the three dots.

[yazdotdev]

Yes @cramforce ! Goodbye three dots

[yazdotdev]

@nainar @cramforce
What would be the recommended placeholder image format (as opposed to fallback)?
WebP does not seem to have progressive loading. But MozJPEG does. Which should take priority?
Would be nice to see the experience of a progressively loaded image placeholder
Or at least know which image format you used to achieve the effect? Or is this a pure graphic mockup?

[yazdotdev]

@andrewwatterson @aghassemi would it be possible to have a custom icon for the loaders?

[nainar]

Hi @yazdotdev that's a great idea! To clarify that I understand you correctly, you want to be able to override the default loader with one of your own so that for e.g. an entire site uses the same loader?

[yazdotdev]

Hi @nainar thanks for replying. That's pretty much it.
If you could :

• have your own loader with your own logo
  
  
  
  • the loading process could be customized according to the lazy fill animation you want
  
  
  • some animations might not work with some image formats
  
  
• use it as standard on your site (e.g. even if you are not embedding some third party site's content)
• if some other site would like to use your site's content (e.g. embed your content)
  
  
  
  • you could provide the amp code for easy integration
  
  
  • it does not even have to be all that different from your standard code (except for some attribution links etc that could just be turned on)
  
  
• please do not hesitate to ask me to clarify anything further
• if you had something different in mind, I would like to hear about it

[choumx]

I'm curious about the when the "image placeholder" variant will be shown, since AMP placeholders are not necessarily images.

[andrewwatterson]

Hey @choumx - the plan is not to show loaders over placeholders that are anything other than just an image.

Our observation is that placeholders that are just images tend to be previews of the content (video poster frame, Instagram source image, et cetera), whereas placeholders that have more content than that could be trying to implement either a custom loader or some other experience we can't necessarily assume should have the stock loader over it.

See attached for the full spec that includes a note on that.

.

[andrewwatterson]

Note the above spec shows a small ads loader that we've since decided against implementing. Even 320x50 ad units will get the full-sized ads loader. Ads with an image placeholder will get no loader (the current behavior).

[jridgewell]

Do we need to do anything to get this to work with blurry image placeholders, eg https://output.jsbin.com/lokowoj/3/quiet (turn on network throttling to see full effect)?

[aghassemi]

@jridgewell yes but it is part of my test plan. no loader will show up with blurry image placeholders.

[nyedidikeke]

Hey @choumx - the plan is not to show loaders over placeholders that are anything other than just an image.

Our observation is that placeholders that are just images tend to be previews of the content (video poster frame, Instagram source image, et cetera), whereas placeholders that have more content than that could be trying to implement either a custom loader or some other experience we can't necessarily assume should have the stock loader over it.

See attached for the full spec that includes a note on that.

.

Kindly share URL to the full spec page.

[nainar]

Closing as this has launched. Please fill issues regarding this feature as a new issue.