memind/src/components/TemplatePreviewThumb.tsx

import { useEffect, useRef, useState } from 'react';

type TemplatePreviewThumbProps = {
  previewUrl: string;
  label: string;
};

export function TemplatePreviewThumb({ previewUrl, label }: TemplatePreviewThumbProps) {
  const hostRef = useRef<HTMLSpanElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '160px 0px' },
    );
    observer.observe(host);
    return () => observer.disconnect();
  }, [previewUrl]);

  return (
    <span ref={hostRef} className="template-shop-cell-thumb template-shop-cell-thumb-live">
      {visible ? (
        <iframe src={previewUrl} title={`${label} 预览缩略图`} tabIndex={-1} />
      ) : (
        <span className="template-shop-thumb-placeholder" aria-hidden="true" />
      )}
    </span>
  );
}