[FEATURE]: Adds loading prop to component

[NicholasLancey]

Description

TW task: https://wethecollective.teamwork.com/app/tasks/27044239

Issue: #119

Adds loading prop to component. This has two options: "lazy" or "eager".

Notes

Currently running into the following Type Script issue:

Type '{ tabIndex: number; "aria-describedby": string; autoPlay: true; className: string; loading: "lazy" | "eager" | undefined; loop: boolean; muted: true; playsInline: true; poster: string | undefined; ref: RefObject<...>; src: string | undefined; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
  Property 'loading' does not exist on type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.

Originally I thought upgrading React would fix this, but their type defs are still outdated for the video element and don't recognise the loading attribute.

[Copilot]

Pull request overview

Adds a new loading prop to the AutoplayVideo component to expose native browser lazy/eager loading behavior for the underlying <video> element, aligned with the lazy-loading request in issue #119.

Changes:

• Add loading?: "lazy" | "eager" to AutoplayVideoProps and pass it through to the <video> element.
• Update package version metadata in the lockfile (3.0.0).

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/lib/components/autoplay-video.tsx	Introduces the loading prop and wires it into the rendered <video>.
package-lock.json	Updates lockfile package version metadata to 3.0.0.

Suppressed comments (1)

src/lib/components/autoplay-video.tsx:62

• loading is described as supporting both "lazy" and "eager", but the current implementation still delays setting src until the component is in view (srcAdded only becomes true when isInView). That makes the "eager" option ineffective. Consider initializing/setting srcAdded based on loading so eager loads immediately while preserving the existing in-view behavior for lazy.

  loading,
  ...props
}: AutoplayVideoProps) {
  const [srcAdded, setSrcAdded] = useState(false)
  const [setInViewRef, isInView] = useInView<HTMLDivElement>(0)

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[NicholasLancey]

Tested locally and everything seems to be working as expected. Keeping this one open for @andrewrubin's review tomorrow.

[andrewrubin]

This is working well @NicholasLancey !

Looking through the code, this addition sort of makes the srcAdded boolean state a bit confusing now, since the browser can now be 100% responsible for swapping the src (loading of the video).

I wonder if it would be worth tweaking this logic now — call it "hasLoaded" or something and tailor our logic accordingly — or wait until the attribute is more widely supported before shedding that code debt. What do you think?

[andrewrubin]

LGTM