From 3b8f538898571dd80efad881c5ec29fb571c92ea Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
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              | 9 +++++++--
 1 file changed, 7 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..def48d3db0580 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?.()
 
@@ -138,6 +139,7 @@ class GatsbyImageHydrator extends Component<
 
   shouldComponentUpdate(nextProps, nextState): boolean {
     let hasChanged = false
+    console.log(this.props, nextProps)
     if (!this.state.isLoading && nextState.isLoading && !nextState.isLoaded) {
       // Props have changed between SSR and hydration, so we need to force render instead of hydrate
       this.forceRender.current = true
@@ -169,6 +171,7 @@ class GatsbyImageHydrator extends Component<
     }
 
     if (this.root.current && !hasChanged) {
+      console.log({ hasChanged })
       this._lazyHydrate(nextProps, nextState)
     }
 
@@ -176,6 +179,7 @@ class GatsbyImageHydrator extends Component<
   }
 
   componentDidMount(): void {
+    console.log(`mount`)
     if (this.root.current) {
       const ssrElement = this.root.current.querySelector(
         `[data-gatsby-image-ssr]`
@@ -291,6 +295,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> =
       classSafe,
       backgroundColor,
     ])
+    console.log({ propsKey })
     return <GatsbyImageHydrator key={propsKey} {...props} />
   }