gatsby-image loading="eager" does not work, only critical={true} works

Description

I’m trying to enable eager loading on images using gatsby-image.

Steps to reproduce

1. npm i --save gatsby-image@latest
2. Import image from gatsby graphql w/ webp
3. Place below the fold and turn off chrome cache, and scroll down to image:

<Image loading="eager" />
<Image criticial />

Expected result

Critical and loading=“eager” behaves the same way

Actual result

Critical loads the image on DOM entry, loading=“eager” behaves like loading=“lazy”

Other info

It looks like the gatsby-image source still references the props.critical instead of checking props.loading.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L216

Oddly there is a warning that gets thrown here to switch to the new loading prop vs eager:

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L36

[KancerEzeroglu]

If someone doesn’t work on this issue, I can take it 😃 Can I?

[doodybrains]

This is also happening for me. Are there any work arounds?