[gatsby-plugin-image] art directed images flicker when parent component rerenders

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 a parent component containing an art directed image re-renders, the art directed image “flickers” even after it has been loaded. This behaviour does not occur with a non-art directed GatsbyImage component.

This behaviour exists in both development and built environments.

Reproduction Link

https://github.com/ardiewen/gatsby-image-withartdirection-repro

Steps to Reproduce

1. Start a new repo and install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp gatsby-source-filesystem or clone this minimal reproduction
2. yarn && yarn develop to test in development environments with no flags
3. Click the increment button on each section to see the behaviour
4. yarn build && yarn start to test in the built environment
5. Click the increment button on each section to see the behaviour …

Expected Result

Art directed images shouldn’t “flicker” after they’ve been loaded, unless the viewport / media query is changing.

Actual Result

It appears that the GatsbyImage component itself isn’t re-rendering, but the picture element is constantly being unmounted / remounted when the parent component is rerendered.

Environment

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  npmPackages:
    gatsby: ^4.2.0 => 4.2.0 
    gatsby-plugin-image: ^2.2.0 => 2.2.0 
    gatsby-plugin-sharp: ^4.2.0 => 4.2.0 
    gatsby-source-filesystem: ^4.2.0 => 4.2.0 
    gatsby-transformer-sharp: ^4.2.0 => 4.2.0

Config Flags

N/A

[dgozen]

I am not sure what you mean by ‘Art directed’ images but we have the same issue I think. We are migrating to gatsby-plugin-images and we have a flicker issue on images. Its a load blocker for migration… You can see the screen recording below from our test branch.

https://user-images.githubusercontent.com/55344620/146938366-293afa9f-faf0-45bb-bd41-23524b53b4e2.mov

.

[twobyte]

OK, thanks for the feedback @dgozen.
I have had to disable the withArtDirection feature for now, so I can progress with the build. Hoping there will be time to return to this and get it working towards the end of the project.