From 7037983de06cd204969cdf3600566cf5b4ca640d Mon Sep 17 00:00:00 2001 From: Hugo Knorr <140080567+hkn-wt@users.noreply.github.com> Date: Tue, 17 Dec 2024 15:56:53 +0100 Subject: [PATCH] fix(templates): prevent image priority and lazy loading incompatibility (#10023) This PR fixes an issue in the hero banner of website templates where `priority` was passed to `ImageMedia` component but was incompatible with NextImage `loading="lazy"`, causing error. The fix is to add a ternary condition to check if `priority` prop is passed before setting `loading. --- templates/website/src/components/Media/ImageMedia/index.tsx | 2 +- .../src/components/Media/ImageMedia/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/website/src/components/Media/ImageMedia/index.tsx b/templates/website/src/components/Media/ImageMedia/index.tsx index cb847ddbc..bf2de6c86 100644 --- a/templates/website/src/components/Media/ImageMedia/index.tsx +++ b/templates/website/src/components/Media/ImageMedia/index.tsx @@ -50,7 +50,7 @@ export const ImageMedia: React.FC = (props) => { src = `${getClientSideURL()}${url}` } - const loading = loadingFromProps || 'lazy' + const loading = loadingFromProps || (!priority ? 'lazy' : undefined) // NOTE: this is used by the browser to determine which image to download at different screen sizes const sizes = sizeFromProps diff --git a/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx b/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx index cb847ddbc..bf2de6c86 100644 --- a/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx +++ b/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx @@ -50,7 +50,7 @@ export const ImageMedia: React.FC = (props) => { src = `${getClientSideURL()}${url}` } - const loading = loadingFromProps || 'lazy' + const loading = loadingFromProps || (!priority ? 'lazy' : undefined) // NOTE: this is used by the browser to determine which image to download at different screen sizes const sizes = sizeFromProps