From 04252402af405745e79d0ed198a8df7e096c655d Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Fri, 29 Oct 2021 12:08:42 +0200 Subject: [PATCH] fix(gatsby-plugin-image): flickering when state changes --- .../src/components/gatsby-image.browser.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx index 3a473d5a88335..73a48941a22e8 100644 --- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx @@ -90,11 +90,12 @@ class GatsbyImageHydrator extends Component< } return import(`./lazy-hydrate`).then(({ lazyHydrate }) => { + const cacheKey = JSON.stringify(this.props.image.images) this.lazyHydrator = lazyHydrate( { image: props.image.images, - isLoading: state.isLoading, - isLoaded: state.isLoaded, + isLoading: state.isLoading || hasImageLoaded(cacheKey), + isLoaded: state.isLoaded || hasImageLoaded(cacheKey), toggleIsLoaded: () => { props.onLoad?.()