Gatsby: Gatsby image flicker when navigating to another page

Created on 20 Oct 2019 · 18Comments · Source: gatsbyjs/gatsby

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;



md5-b77677eb91ff843469751e717d76f479



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;



md5-b77677eb91ff843469751e717d76f479



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;



md5-b77677eb91ff843469751e717d76f479



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;



md5-e21638d410e85ee4b056472fcd43886f



  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

stale? needs more info

Source

dickwyn

Most helpful comment

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

marcells on 12 Dec 2019

👍5 👀3

All 18 comments

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?

LekoArts on 5 Nov 2019

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

dickwyn on 7 Nov 2019

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!

LekoArts on 7 Nov 2019

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

dickwyn on 7 Nov 2019

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.

dickwyn on 7 Nov 2019

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[bot] on 28 Nov 2019

bump

dickwyn on 30 Nov 2019

The same issue occurs on my site.

marcells on 2 Dec 2019

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.

monotykamary on 12 Dec 2019

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

marcells on 12 Dec 2019

👍5 👀3

Hiya!

This issue has gone quiet. Spooky quiet. 👻

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

github-actions[bot] on 2 Jan 2020

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! 💪💜

github-actions[bot] on 12 Jan 2020

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

Thanks in advance!

wardpeet on 13 Jan 2020

@wardpeet I have one here

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

dickwyn on 13 Jan 2020

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

ttstauss on 1 Feb 2020

Hiya!

This issue has gone quiet. Spooky quiet. 👻

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

github-actions[bot] on 21 Feb 2020

Hey again!

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

github-actions[bot] on 3 Mar 2020

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.