From 12da9782a2ac8c3120e1c0cfa0661d43dc2c3ca5 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 12 Jan 2021 18:12:42 +0100
Subject: [PATCH] =?UTF-8?q?fix(gatsby-plugin-image):=20do=20not=20show=20p?=
 =?UTF-8?q?laceholder=20if=20image=20already=20lo=E2=80=A6=20(#28868)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(gatsby-plugin-image): do not show placeholder if image already loaded

* remove console.log

Co-authored-by: Laurie <laurie@gatsbyjs.com>
---
 .../src/components/gatsby-image.browser.tsx    | 18 +++++++-----------
 .../src/components/lazy-hydrate.tsx            |  5 ++++-
 2 files changed, 11 insertions(+), 12 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 64d8285cd9f41..ad1fa9f7d113c 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -109,13 +109,14 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
         if (hasSSRHtml.complete) {
           customOnLoad?.()
           storeImageloaded(JSON.stringify(images))
-        }
-        hasSSRHtml.addEventListener(`load`, function onLoad() {
-          hasSSRHtml.removeEventListener(`load`, onLoad)
+        } else {
+          hasSSRHtml.addEventListener(`load`, function onLoad() {
+            hasSSRHtml.removeEventListener(`load`, onLoad)
 
-          customOnLoad?.()
-          storeImageloaded(JSON.stringify(images))
-        })
+            customOnLoad?.()
+            storeImageloaded(JSON.stringify(images))
+          })
+        }
         return undefined
       }
 
@@ -157,11 +158,6 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
         return
       }
 
-      // When no ssrHtml is found (develop) we should force render instead of hydrate
-      if (!hasSSRHtml) {
-        hydrated.current = true
-      }
-
       import(`./lazy-hydrate`).then(({ lazyHydrate }) => {
         lazyHydrator.current = lazyHydrate(
           {
diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
index 91c289027af41..1de40801e58fa 100644
--- a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
+++ b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
@@ -19,6 +19,8 @@ type LazyHydrateProps = Omit<GatsbyImageProps, "as" | "style" | "className"> & {
   ref: MutableRefObject<HTMLImageElement | undefined>
 }
 
+const IS_DEV = process.env.NODE_ENV === `development`
+
 export function lazyHydrate(
   {
     image,
@@ -97,7 +99,8 @@ export function lazyHydrate(
     </LayoutWrapper>
   )
 
-  const doRender = hydrated.current ? render : hydrate
+  // Force render to mitigate "Expected server HTML to contain a matching" in develop
+  const doRender = hydrated.current || IS_DEV ? render : hydrate
   doRender(component, root.current)
   hydrated.current = true