[Gatsby-plugin-image] images are flickering on prod env

[maruthasalamr]

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

I'm have the issue in gatsby-plugin-image images are flickering while initial rendering of the page. Here is the video clip i a have added.

Screen Recording 2024-06-26 at 7.03.31 PM.mov

I have tried to add this package as well . But still issue is not resolved.

Gatsby-config

plugins: compact([
   {
      resolve: `gatsby-plugin-fix-fouc`,
      options: {
        attributeName: "is-loading",
       // minWidth: breakpoints.values.sm,
        timeout: 3000,
      }
    }
])

Screen.Recording.2024-06-26.at.7.03.31.PM.mov

Package.json

  "gatsby": "5.11.0"
 "gatsby-source-filesystem": "^5.13.1",
 "gatsby-plugin-image": "^3.13.1",
 "gatsby-transformer-sharp": "^5.13.1",
  "gatsby-plugin-sharp": "^5.13.1"

System Properties
OS- MAC Book Pro M3 chip
Browser - Chrome

anyone help me out ?

Thank you

Reproduction Link

No code

Steps to Reproduce

Described above

Expected Result

No Flickering of images

Actual Result

Flickering image

Environment

OS- MAC Book Pro M3 chip
Browser - Chrome

Config Flags

No response