fix(gatsby-plugin-image): flickering when state changes (#33732) (#33734

) Co-authored-by: Ward Peeters <[email protected]>
gatsbyjs · Oct 29, 2021 · 3e8fe2f · 3e8fe2f
1 parent 5505c47
commit 3e8fe2f
Showing 1 changed file with 3 additions and 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
@@ -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?.()