fix(gatsby-image): check if imageRef is still available

[wardpeet]

Description

Lazyloaded images don't have an imageRef.current yet because they haven't been hydrated from the dom. We do an extra check to make sure it's not null so we don't crash. imgCached will always stay false but that always has been broken

At least we don't crash

[blainekasten]

lgtm, just curious though, can we use nullish operators here? this.imageRef.current?.currentSrc

[wardpeet]

We could but we end up with a bigger bundle, that's the problem with new features and babel. Babel adds extra bytes because nullish operators as it checks null & undefined. I can shortcut this by just testing truthy.

What's the difference in bytes? not much but in my opinion not worth it. (+14 bytes)

nullish:

var t;this.setState({imgLoaded:e,imgCached:!!(null===(t=this.imageRef.current)||void 0===t?void 0:t.currentSrc)})

non nullish:

this.setState({imgLoaded:e,imgCached:!(!this.imageRef.current||!this.imageRef.current.currentSrc)})

[pieh]

Let's get this in - if nothing else some sanity check is never wrong ;)

[polarathene]

Trying to understand this PR as I was looking into the TODO comment it adds. A little further up my comment explains why there is a nested setState call here due to imageRef.current not being available until isVisible is true which mounts the img element:

Once isVisible is true, imageRef becomes accessible, which imgCached needs access to.

You cite that for lazyloaded components that this can be null causing a crash because they have not been hydrated from the DOM yet...? If hydration is involved, that would imply these aren't lazyloaded but were in the markup during SSR?

It should only be run by lazyloaded instances that are using Intersection Observer API as I added imgCached before native lazy loading support arrived.

You then state it's always been broken and is always false? That was not the case when I created the PR for it, it solved an actual problem.

I'd appreciate a test case to reproduce the crash, or clarification for what "lazyloaded" refers to.