fix(gatsby-plugin-image): Fix blur up on navigate issue (#29333) (#29354

) Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com> (cherry picked from commit 1443ecd) Co-authored-by: Matt Kane <matt@gatsbyjs.com>
gatsbyjs · Feb 5, 2021 · 4ef8ce1 · 4ef8ce1
1 parent 4432c39
commit 4ef8ce1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -60,6 +60,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
   image,
   onLoad: customOnLoad,
   backgroundColor,
+  loading = `lazy`,
   ...props
 }) {
   if (!image) {
@@ -169,6 +170,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
               toggleIsLoaded(true)
             },
             ref,
+            loading,
             ...props,
           },
           root,

diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
@@ -59,7 +59,7 @@ export function lazyHydrate(
   }
 
   const cacheKey = JSON.stringify(images)
-  const hasLoaded = !hydrated.current && hasImageLoaded(cacheKey)
+  const hasLoaded = hasImageLoaded(cacheKey)
 
   imgStyle = {
     objectFit,