fix(templates): prevent image priority and lazy loading incompatibili…

…ty (#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

@@ -50,7 +50,7 @@ export const ImageMedia: React.FC<MediaProps> = (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

templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx

@@ -50,7 +50,7 @@ export const ImageMedia: React.FC<MediaProps> = (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