feat(gatsby-image): Add support for native lazy loading

[sidharthachatterjee]

So... Chrome just added support for native lazy loading for images and iframes (https://twitter.com/addyosmani/status/1114777583302799360)

This PR adds support in gatsby-image so that we use native lazy loading when available and fall back to our IntersectionObserver code when not.

Test

yarn add gatsby-image@loading-attribute

Notes

I've exposed the loading attribute as a prop but just realised that we'll want to set that based on our critical prop as @KyleAMathews noted in #13201

Another thing to note is that we always set this for the no script Img tag (rendered during SSR and no js) since it's a progressive enhancement and setting it does not break anything in browsers that are yet to support it

Todo

• Add some snapshot tests
• Update README and documentation for gatsby-image
• Blog post
• Deprecate critical prop and set loading based on it
• Update using-gatsby examples

Related

• Chromium: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/jxiJvQc-gVg
• Addy's blog post: https://addyosmani.com/blog/lazy-loading/
• Fixes Add support for native lazy loading to gatsby-image #13201

[KyleAMathews]

maybe to make it clear this is now representing two different states it could be changed to isVisibleOrNativeLazyLoadingSupported — verbose is effective :-D

[polarathene]

@KyleAMathews isn't the isVisible state here linked to the image components visibility state for it's picture element? I suggested a refactor here, but perhaps that's the wrong approach.

[polarathene]

I see you got onto while I was asleep :P All good, I think you did a better job than if I had attempted it!

Provided a review as requested :)

[polarathene]

Is nativeLazyLoadSupported boolean actually useful here?

This doesn't seem like the right approach for handling this single attribute. You're defining a const obj with a potential single prop that if the boolean prop is true, adopts the loading var as a key/prop to it's contained string value?

The destructuring approach here and below for this seems to harm readability. Why not instead go with:

loading={loading || `auto`}
// or conditionally, if the prop isn't specified, the attribute won't be assigned
loading={loading}

If the browser supports this attribute, auto is applied by default implicitly, there isn't a need to check for native support to assign it, makes no difference.

[DSchau]

Fixes #13201

[polarathene]

Any feedback to what I gave? If there's nothing wrong with it, I could perhaps make the changes as it seems @sidharthachatterjee is busy/away for a couple weeks now?

If so, how do I contribute to this PR? Or do I need to fork it and send another PR in? Or does @sidharthachatterjee still want to finish this PR?

[KyleAMathews]

Awesome work @sidharthachatterjee!

[pieh]

LGTM!

[pieh]

LGTM! (deju vu)

[KyleAMathews]

[sidharthachatterjee]

@pieh You mean a glitch in the Matrix

[sidharthachatterjee]

Published in gatsby-image@2.1.0