From 32238d99a3de803da292a44677f78867f87c0a04 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Fri, 5 Feb 2021 16:15:36 +0000 Subject: [PATCH] fix(gatsby-plugin-image): Fix blur up on navigate issue (#29333) Co-authored-by: gatsbybot (cherry picked from commit 1443ecde5fe5f6e4b0072239bd3f2688ecb3d260) --- .../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 = function image, onLoad: customOnLoad, backgroundColor, + loading = `lazy`, ...props }) { if (!image) { @@ -169,6 +170,7 @@ export const GatsbyImageHydrator: FunctionComponent = 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,