Support optional priority prop on Image component

.changeset/sour-horses-confess.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+[#1245](https://github.com/Shopify/hydrogen/pull/1245) - Support optional `priority` prop on Image component. When `true`, the image will be eagerly loaded. Defaults to `false`.

docs/components/primitive/image.md

@@ -77,6 +77,7 @@ export default function ExternalImageWithLoader() {
 | height         | <code>height</code>                              | The integer value for the height of the image. This is a required prop when `src` is present.                                                                                                        |
 | loader?        | <code>(props: ImageLoaderOptions): string</code> | A custom function that generates the image URL. Parameters passed into this function includes `src` and an `options` object that contains the provided `width`, `height` and `loaderOptions` values. |
 | loaderOptions? | <code>ImageLoaderOptions['options']</code>       | An object of `loader` function options. For example, if the `loader` function requires a `scale` option, then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`). |
+| priority? | <code>boolean</code>       | When true, the image will be eagerly loaded. Defaults to `false`. Should only be used when the image is visible above the fold. For more information refer to [Image Element Loading Attr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading).   |
 
 ## Component type
 

packages/hydrogen/src/components/Image/Image.tsx

@@ -17,6 +17,11 @@ export interface BaseImageProps {
    * then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`).
    */
   loaderOptions?: ImageLoaderOptions['options'];
+  /** 
+   * When true, the image will be eagerly loaded. Defaults to `false`. Should only be used when 
+   * the image is visible above the fold. For more information refer to [Image Element Loading Attr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading).
+   */
+  priority?: boolean;
 }
 
 interface MediaImagePropsBase extends BaseImageProps {
@@ -57,6 +62,7 @@ export function Image(props: ImageProps) {
     height,
     loader,
     loaderOptions,
+    priority,
     ...passthroughProps
   } = props;
 
@@ -80,6 +86,7 @@ export function Image(props: ImageProps) {
         loaderOptions,
         id,
         alt,
+        priority,
       })
     : {
         src,
@@ -88,6 +95,7 @@ export function Image(props: ImageProps) {
         width,
         height,
         loader,
+        priority,
         loaderOptions: {width, height, ...loaderOptions},
       };
 
@@ -99,7 +107,7 @@ export function Image(props: ImageProps) {
   return (
     <img
       id={imgProps.id ?? ''}
-      loading="lazy"
+      loading={imgProps.priority ? 'eager' : 'lazy'}
       alt={imgProps.alt ?? ''}
       {...passthroughProps}
       src={srcPath}
@@ -114,6 +122,7 @@ function convertShopifyImageData({
   data,
   options,
   loader,
+  priority,
   loaderOptions,
   id: propId,
   alt,
@@ -131,5 +140,6 @@ function convertShopifyImageData({
     height,
     loader: loader ? loader : shopifyImageLoader,
     loaderOptions: {...options, ...loaderOptions},
+    priority,
   };
 }