Gatsby image flicker when navigating to another page

[dickwyn]

Description

My header component uses an optimized image from gatsby-plugin-sharp and I am rendering it with gatsby-image. I noticed that the image flickers when I am changing between pages (eg. between home and page 2).

I updated to the latest version of gatsby and gatsby-image

I tried debugging by putting the same image in the header component but using the tag with a relative import as the src.

Here's a gif showing the behavior, notice the top icon flickers - https://imgur.com/a/wH2qD8Z

Steps to reproduce

Demo of behavior

• Create a gatsby project with the following js files
• Run the application locally
• Continuously click the "Go to..." button

import React from "react";
import { Link } from "gatsby";
import Layout from "../components/layout";
import SEO from "../components/seo";

const IndexPage = () => {
  return (
    <Layout>
      <SEO title="Home" />
      <Link to="/page-2">Go to page 2</Link>
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
    </Layout>
  );
};

export default IndexPage;

import React from "react";
import { Link } from "gatsby";

import Layout from "../components/layout";
import SEO from "../components/seo";

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <Link to="/">Go back to the homepage</Link>
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
);

export default SecondPage;

import React from "react";
import PropTypes from "prop-types";
import Header from "./Header";
import "../scss/App.scss";

const Layout = ({ children }) => {
  return (
    <div className="layout">
      <Header />
      <main>{children}</main>
    </div>
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

import { Link } from "gatsby";
import React from "react";
import logo from "../../images/gatsby-icon.png";
import Image from "./image";

const Header = () => (
  <header>
    <div>
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `black`,
            textDecoration: `none`,
            height: "30px",
            width: "30px",
          }}
        >
          Gatsby Default
          <Image />
          <img src={logo} alt="logo" style={{ width: "200px" }} />
        </Link>
      </h1>
    </div>
  </header>
);

export default Header;

import { graphql, useStaticQuery } from "gatsby";

const getOptimizedImage = () => {
  const { images } = useStaticQuery(graphql`
    query optimizedImageQuery {
      images: allFile(filter: { sourceInstanceName: { eq: "images" } }) {
        edges {
          node {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
            relativePath
          }
        }
      }
    }
  `);

  return images;
};

export default getOptimizedImage;

Expected result

Icon should remain static

Actual result

Icon on header is flickering

Environment

  System:
    OS: macOS 10.15
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 77.0.3865.120
    Firefox: 68.0.2
    Safari: 13.0.2
  npmPackages:
    gatsby: ^2.13.44 => 2.13.52 
    gatsby-image: ^2.2.29 => 2.2.29 
    gatsby-plugin-eslint: ^2.0.5 => 2.0.5 
    gatsby-plugin-google-analytics: ^2.1.16 => 2.1.16 
    gatsby-plugin-manifest: ^2.2.20 => 2.2.20 
    gatsby-plugin-netlify-cms: ^4.1.6 => 4.1.6 
    gatsby-plugin-offline: ^2.2.4 => 2.2.4 
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.3 
    gatsby-plugin-sass: ^2.1.4 => 2.1.4 
    gatsby-plugin-sharp: ^2.2.28 => 2.2.28 
    gatsby-source-filesystem: ^2.1.6 => 2.1.9 
    gatsby-transformer-remark: ^2.6.26 => 2.6.26 
    gatsby-transformer-sharp: ^2.2.20 => 2.2.20 
  npmGlobalPackages:
    gatsby-cli: 2.8.3

[LekoArts]

Did you also try that after a gatsby build and gatsby serve? Does this always happen or only if you switch pages so fast? Can you share a reproduction repository?

[dickwyn]

@LekoArts I have a link to the demo included in the Steps to reproduce

[LekoArts]

I've seen that, yes. But I'd kindly ask you to provide a minimal reproduction and the link to that as a live version isn't enough. Also, could you please answer my questions, that would help. Thanks!

[dickwyn]

Yes, this always happens. Let me go ahead an make a minimal reproduction for you.

[dickwyn]

Here's a repo for the minimal reproduction.

https://github.com/dickwyn/bug-18858

Continuously click the "Go to..." button, doesn't matter the speed you click it. The top image will periodically flash.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 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. You can also add the label "not stale" to keep this issue open!
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! 💪💜

[dickwyn]

bump

[marcells]

The same issue occurs on my site.

[monotykamary]

Same here; a bit subtle, but trigger worthy 😶.

I've checked a good portion of gatsby starters and it occasionally shows, although much more noticeable when cache is disabled on chrome devtools.

[marcells]

I was able to fix it by setting loading="eager" to the Img component.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 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. You can also add the label "not stale" to keep this issue open!
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! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
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 again for being part of the Gatsby community! 💪💜

[wardpeet]

I don't think we fixed this, can anyone create a reproduction git repository we can use to reproduce this?

Thanks in advance!

[dickwyn]

@wardpeet I have one here

https://github.com/dickwyn/gatsby-bug-18858

[ttstauss]

I'm facing the same issue when using gatsby-background-image which I believe uses gatsby-image under the hood.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 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. You can also add the label "not stale" to keep this issue open!
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! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
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 again for being part of the Gatsby community! 💪💜

[nghiepdev]

This is because Cache-Control HTTP header, The image should be cached Cache-Control: public
Remove no-store, no-cache, or must-revalidate on Cache-Control HTTP header.

[balexand]

I'm having this issue in the latest version of Gatsby. The flicker happens any time a component containing a <GatsbyImage> re-renders. I added this code to a parent component to force it to re-render for debugging:

const [arbitrary, setArbitrary] = useState(0)

  useEffect(() => {
    setInterval(() => {
      setArbitrary(i => i + 1)
    }, 3000)
  }, [])

This is what I saw in Chrome Devtools:

Screen.Recording.2021-06-22.at.9.08.15.PM.mov

In my case, this was caused because the object being passed to the image prop of <GatsbyImage> was not a reference to the same object in every render. It was an identical object in every render, but not the same reference.

I consider this to be a bug in gatsby-plugin-image and I hope it gets fixed. In the meantime, I was able to work around the issue by ensuring that the image prop is an identical reference in every render. I was able to accomplish this using useMemo.

[Glazy]

Related to #34190 which contains a screen recording and a simple reproduction of this issue.