fix(gatsby-plugin-image): Hide placeholder on hydrated components with loaded images

[ascorbic]

We need to allow handling of "loaded" tracking when already hydrated. We also need to pass loading=lazy to browser components, not just server. Fixes an issue where navigating between pages that shared images was causing the placeholder to never be hidden.

[wardpeet]

It fixes the issue but it's actually a little bit of a sideEffect, none the less I don't see any issues with it. I would like to see tests to actually catch this in the future.

Something to consider to not have these sideEffects anymore is to wrap the GatsbyImage component in gatsby-image.browser.tsx with React.memo so we don't re-trigger the component when we don't have to.

To reproduce what this PR fixes is to simply add a React.useState & React.useEffect to your page.

  const [data, setData] = React.useState(null)

  React.useEffect(() => {
    setTimeout(() => {
      setData("test")
    }, 1000)
  },)

[ascorbic]

Published in gatsby-plugin-image@0.7.1

[t2ca]

Published in gatsby-plugin-image@0.7.1

Thank you @ascorbic, this fixed the issue for me.

[sandren]

@ascorbic Is this supposed to be fixed in gatsby-plugin-image@1.0.0.next as well?

I'm still experiencing the same issue when using gatsby@3.0.0.next, gatsby-plugin-sharp@3.0.0.next, gatsby-transformer-sharp@3.0.0.next, and gatsby-plugin-image@1.0.0.next together.

[ascorbic]

@sandren It's not in next yet. I'll do a release tomorrow

[laurenskling]

This feature (and release 0.7.1) didn't end up in the changelog?