From f9f2add91d171606cf569a1666173c85946b7491 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Fri, 29 Oct 2021 12:44:39 +0200
Subject: [PATCH] fix(gatsby-plugin-image): flickering when state changes
 (#33732)

(cherry picked from commit 0a04e38d857255fe675101bd96797c67d2d6e743)
---
 .../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?.()