[gatsby-plugin-image] Images flickering on route change using GatsbyImage

[Glazy]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When moving from one page to another any images that are rendered using GatsbyImage from gatsby-plugin-image will briefly flicker/blink.

I have created a minimal reproduction of this which can be found attached to this issue alongside the following screen recording.

Also checked with gatsby and all associated plugins using version next but still find the same issue.

Screen.Recording.2021-12-03.at.17.11.31.mov

Reproduction Link

https://github.com/Glazy/gatsby-image-flicker-repro

Steps to Reproduce

1. Clone and run reproduction repository
2. Use link to toggle between / and /about

Expected Result

The image shouldn't flicker and should remain rendered at all times (like the regular img tag included in the example).

Actual Result

The image flickers causing a jarring UX.

Environment

System:
    OS: macOS 12.0
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - ~/.nvm/versions/node/v17.0.1/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v17.0.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 94.0.2
    Safari: 15.0
  npmPackages:
    gatsby: next => 4.3.0 
    gatsby-plugin-image: next => 2.3.0 
    gatsby-plugin-sharp: next => 4.3.0 
    gatsby-source-filesystem: next => 4.3.0 
    gatsby-transformer-sharp: next => 4.3.0

Config Flags

No response

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Glazy]

Pinging to keep this issue open.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Glazy]

Pinging again to keep this issue open.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Glazy]

Pinging again to keep this issue open.

[ConnorMcF]

+1, also seeing this.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Hahlh]

Not stale

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Magofoco]

I am having the same issue

[LekoArts]

This will be fixed by #35226

[adamatronix]

I am seeing something similar wit 2.25.0. I see a flash with the alt text then the image. No placeholder. I should note that it is most notable in Safari Version 16.1 and not chrome. I see it on iOS chrome.

Screen.Recording.2023-01-12.at.12.03.01.PM.mov

[airfortech]

have flickering too with "gatsby-plugin-image": "^3.10.0".
Is there any version of package that works fine?

[EKarpinsky]

@wardpeet can this be reopened please? Many people are still experiencing this issue (see latest comments)