<!-- BEGIN COPY / PASTE -->
    import React, { useEffect, useRef, useState } from 'react';

    const LazyImage = ({ src, alt }) => {
      const [isVisible, setIsVisible] = useState(false);
      const imgRef = useRef();

      useEffect(() => {
        const observer = new IntersectionObserver(
          ([entry]) => {
            if (entry.isIntersecting) {
              setIsVisible(true);
              observer.disconnect();
            }
          },
          { threshold: 0.1 }
        );

        if (imgRef.current) {
          observer.observe(imgRef.current);
        }

        return () => {
          if (imgRef.current) {
            observer.unobserve(imgRef.current);
          }
        };
      }, []);

      return (
        <img
          ref={imgRef}
          src={isVisible ? src : ''}
          alt={alt}
          loading="lazy"
          style={{ minHeight: '200px', minWidth: '300px' }}
        />
      );
    };

    export default LazyImage;
    <!-- END COPY / PASTE -->