@pantheon-systems/p1-media 0.4.3 → 0.4.4

package/dist/index.mjs

@@ -2773,6 +2773,8 @@ function MediaImage({
   mediaBaseUrl,
   transform,
   alt,
+  loading = "lazy",
+  decoding = "async",
   ...rest
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
@@ -2782,6 +2784,8 @@ function MediaImage({
     {
       src: props.src,
       alt: alt ?? props.alt,
+      loading,
+      decoding,
       ...props.width !== void 0 ? { width: props.width } : {},
       ...props.height !== void 0 ? { height: props.height } : {},
       ...rest
@@ -2814,7 +2818,9 @@ function MediaFigure({
   mediaBaseUrl,
   transform,
   className,
-  captionClassName
+  captionClassName,
+  loading = "lazy",
+  decoding = "async"
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
   if (!props.src) return null;
@@ -2825,6 +2831,8 @@ function MediaFigure({
       {
         src: props.src,
         alt: props.alt,
+        loading,
+        decoding,
         ...props.width !== void 0 ? { width: props.width } : {},
         ...props.height !== void 0 ? { height: props.height } : {}
       }
@@ -2856,19 +2864,29 @@ function createMediaFigureBlock(options) {
     schema,
     className,
     captionClassName,
-    placeholder = "Choose a photo from the media library"
+    placeholder = "Choose a photo from the media library",
+    defaultLoading = "lazy"
   } = options;
   return {
     label,
     fields: {
       // `p1-media` is registered by createMediaPlugin via overrides.fieldTypes,
       // so it is not part of Puck's built-in Field union.
-      photo: { type: "p1-media", label: fieldLabel }
+      photo: { type: "p1-media", label: fieldLabel },
+      loading: {
+        type: "radio",
+        label: "Loading",
+        options: [
+          { label: "Lazy", value: "lazy" },
+          { label: "Eager", value: "eager" }
+        ]
+      }
     },
     defaultProps: {
-      photo: null
+      photo: null,
+      loading: defaultLoading
     },
-    render: ({ photo }) => {
+    render: ({ photo, loading }) => {
       const { src } = getMediaProps(photo ?? null, { mediaBaseUrl });
       if (!src) {
         return /* @__PURE__ */ jsx14("div", { style: placeholderStyle, children: placeholder });
@@ -2881,7 +2899,8 @@ function createMediaFigureBlock(options) {
           transform,
           schema,
           className,
-          captionClassName
+          captionClassName,
+          loading: loading === "eager" ? "eager" : "lazy"
         }
       );
     }