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 <[email protected]>

Author: wardpeet

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(
           {

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