[Avatar] Avatar.Image doesn't implement lazy loading

[revuwem]

Bug report

Current Behavior

The <Avatar.Image /> accepts loading="lazy" but it actually has no effect, the image loads on page loading time.

Expected behavior

The <Avatar.Image /> with loading="lazy" provided loads image only when user navigates to it.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-avatar	^1.0.4
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[revuwem]

It looks like the useImageLoadingStatus in Avatar.tsx doesn't handle the lazy attribute for created image.

function useImageLoadingStatus(src?: string) {
  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');

  useLayoutEffect(() => {
    if (!src) {
      setLoadingStatus('error');
      return;
    }

    let isMounted = true;
    const image = new window.Image();

    const updateStatus = (status: ImageLoadingStatus) => () => {
      if (!isMounted) return;
      setLoadingStatus(status);
    };

    setLoadingStatus('loading');
    image.onload = updateStatus('loaded');
    image.onerror = updateStatus('error');
    image.src = src;

    return () => {
      isMounted = false;
    };
  }, [src]);

  return loadingStatus;
}