fix(gatsby-plugin-image): do not show placeholder if image already lo… (

#28868) * fix(gatsby-plugin-image): do not show placeholder if image already loaded * remove console.log Co-authored-by: Laurie <laurie@gatsbyjs.com>
gatsbyjs · Jan 12, 2021 · 12da978 · 12da978
1 parent a8c2f39
commit 12da978
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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