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

[ardiewen]

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

[ardiewen]

@wardpeet figured I would tag you for visibility since you've worked on a similar issue in #32037 recently.

[fergusfrl]

@ardiewen thanks for raising. We are also experiencing this issue.

[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.

Screen.Recording.2021-12-21.at.14.07.58.mov

.

[twobyte]

Is this fix confirmed? I’m using gatsby-plugin-image v2.15.0 and still experiencing flickering when using withArtDirection. I am trying to have portrait/landscape image variants in a react-responsive-carousel slider, but the withArtDirection images blink on each slide.

[dgozen]

For the fix, we changed the way we loaded the images in our code and later they were removed from our hero so I am not sure if the problem still persists or not.

[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.