Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MASTER FEATURE] New default loaders for AMP #20237

Open
nainar opened this Issue Jan 9, 2019 · 13 comments

Comments

@nainar
Copy link
Collaborator

nainar commented Jan 9, 2019

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

This comment has been minimized.

Copy link
Collaborator Author

nainar commented Jan 17, 2019

Context here: #3830

@nainar

This comment has been minimized.

Copy link
Collaborator Author

nainar commented Mar 9, 2019

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
default-small-0
Without image placeholder
default-small-1
With image placeholder

Default size
default-default-0
Without image placeholder
default-default-1
With image placeholder

Content specific loader

Video loader

video-default-0
Without image placeholder
video-default-1
With image placeholder

Ads loader

ad-default-0
Without image placeholder
ad-default-1
With image placeholder

Twitter loader

twitter-default-0
Without image placeholder
twitter-default-1
With image placeholder

Pinterest loader

pinterest-default-0
Without image placeholder
pinterest-default-1
With image placeholder

Instagram loader

instagram-large-0
Without image placeholder
instagram-large-1
With image placeholder

Facebook loader

facebook-default-0
Without image placeholder
facebook-default-1
With image placeholder

cc @andrewwatterson @aghassemi

Paging @cramforce @rudygalfi @cpapazian @paularmstrong

@cramforce

This comment has been minimized.

Copy link
Member

cramforce commented Mar 11, 2019

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

@yazdotdev

This comment has been minimized.

Copy link

yazdotdev commented Mar 11, 2019

Yes @cramforce ! Goodbye three dots

@yazdotdev

This comment has been minimized.

Copy link

yazdotdev commented Mar 11, 2019

@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

This comment has been minimized.

Copy link

yazdotdev commented Mar 11, 2019

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

@nainar

This comment has been minimized.

Copy link
Collaborator Author

nainar commented Mar 11, 2019

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

This comment has been minimized.

Copy link

yazdotdev commented Mar 11, 2019

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

This comment has been minimized.

Copy link
Collaborator

choumx commented Apr 2, 2019

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

@andrewwatterson

This comment has been minimized.

Copy link
Contributor

andrewwatterson commented Apr 2, 2019

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.

amp-loaders
.

@andrewwatterson

This comment has been minimized.

Copy link
Contributor

andrewwatterson commented Apr 2, 2019

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

This comment has been minimized.

Copy link
Member

jridgewell commented Apr 2, 2019

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

This comment has been minimized.

Copy link
Member

aghassemi commented Apr 2, 2019

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

@aghassemi aghassemi referenced this issue Apr 3, 2019

Draft

Implement new default loaders - Do Not Review #21692

0 of 11 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.