fix iframe will take away the focus

[DiamondThree]

No description provided.

[lawvs]

Hey, I make a simple LazyIframe implement, what do you think?

const LazyIframe = ({
  src,
  delay = 3000,
  fallback,
}: {
  src: string;
  delay?: number;
  fallback?: ReactElement;
}) => {
  const [show, setShow] = useState(false);
  const timer = useRef<number>();

  useEffect(() => {
    // Hide iframe when the src changed
    setShow(false);
  }, [src]);

  const onLoad = () => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      // Prevent iframe scrolling parent container
      // Remove the delay after the issue is resolved
      // See W3C https://github.com/w3c/csswg-drafts/issues/7134
      // See https://forum.figma.com/t/prevent-figmas-embed-code-from-automatically-scrolling-to-it-on-page-load/26029/6
      setShow(true);
    }, delay);
  };

  return (
    <>
      <iframe
        src={src}
        style={{ display: show ? "block" : "none" }}
        onLoad={onLoad}
      />
      {!show && fallback}
    </>
  );
};

// Usage

<IframeContainer
  onMouseDown={(e) => {
    e.preventDefault();
    e.stopPropagation();
  }}
>
  <LazyIframe src={src} />
</IframeContainer>;

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	19fcdb0
Status:	🚫  Build failed.

View logs