[FEATURE]: Adds loading prop to component

.changeset/strong-crabs-switch.md

@@ -0,0 +1,5 @@
+---
+"@wethegit/react-autoplay-video": patch
+---
+
+Adds loading prop, allowing for lazy and eager loading of the video element.

src/lib/components/autoplay-video.tsx

@@ -7,6 +7,12 @@ import { classnames } from "../utils/classnames"
 
 import styles from "./autoplay-video.module.css"
 
+declare module "react" {
+  interface VideoHTMLAttributes<T> extends React.HTMLAttributes<T> {
+    loading?: "lazy" | "eager"
+  }
+}
+
 export interface AutoplayVideoProps extends React.ComponentPropsWithRef<"div"> {
   /**
    * Visually-hidden description of the video.
@@ -36,6 +42,10 @@ export interface AutoplayVideoProps extends React.ComponentPropsWithRef<"div"> {
    * Video path to use as the video element's src attribute.
    */
   src: string
+  /**
+   * Whether or not to add the loading attribute to the video element.
+   */
+  loading?: "lazy" | "eager"
 }
 
 /**
@@ -51,9 +61,10 @@ export function AutoplayVideo({
   renderReducedMotionFallback,
   src,
   loop = true,
+  loading,
   ...props
 }: AutoplayVideoProps) {
-  const [srcAdded, setSrcAdded] = useState(false)
+  const [srcAdded, setSrcAdded] = useState(loading === "eager")
   const [setInViewRef, isInView] = useInView<HTMLDivElement>(0)
   const descriptionID = useId()
   const videoRef = useRef<HTMLVideoElement | null>(null)
@@ -72,8 +83,13 @@ export function AutoplayVideo({
 
   // Set a flag to load the content (video or fallback), based on its visibility.
   useEffect(() => {
-    if (isInView) setSrcAdded(true)
-  }, [isInView])
+    if (loading === "eager") {
+      setSrcAdded(true)
+      return
+    }
+
+    setSrcAdded(isInView)
+  }, [isInView, loading])
 
   // Ensure the video does not continue to play when off-screen.
   // Play/pause the video based on the `paused` override prop.
@@ -109,6 +125,7 @@ export function AutoplayVideo({
             aria-describedby={descriptionID}
             autoPlay
             className={styles["autoplay-video__media"]}
+            loading={loading}
             loop={loop}
             muted
             playsInline