From 4ef8ce12bb38e3ee4bee07f78ff0d4ac13a6bdea Mon Sep 17 00:00:00 2001
From: Abhi Aiyer <abhiaiyer91@gmail.com>
Date: Fri, 5 Feb 2021 08:56:46 -0800
Subject: [PATCH] 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 1443ecde5fe5f6e4b0072239bd3f2688ecb3d260)

Co-authored-by: Matt Kane <matt@gatsbyjs.com>
---
 .../gatsby-plugin-image/src/components/gatsby-image.browser.tsx | 2 ++
 packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx    | 2 +-
 2 files changed, 3 insertions(+), 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
index 247359f39333e..f31269ed51c70 100644
--- 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
index 96dcf8a8193b7..3cff538bc7c88 100644
--- 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,