Repository: mui/material-ui
File: docs/src/modules/components/DemoSandbox.js (JavaScript)

Code before:
  const [iframeLoaded, onLoad] = React.useReducer(() => true, false);

  React.useEffect(() => {
    const document = frameRef.current.contentDocument;
    // When we hydrate the iframe then the load event is already dispatched
    // once the iframe markup is parsed (maybe later but the important part is
    // that it happens before React can attach event listeners).
    // We need to check the readyState of the document once the iframe is mounted
    // and "replay" the missed load event.
    // See https://github.com/facebook/react/pull/13862 for ongoing effort in React
    // (though not with iframes in mind).
    if (document != null && document.readyState === 'complete' && !iframeLoaded) {
      onLoad();
    }
  }, [iframeLoaded]);

  const document = frameRef.current?.contentDocument;
  return (
    <React.Fragment>
      <Iframe
        onLoad={onLoad}
        ref={frameRef}
        title={`${name} demo`}
        srcDoc={`<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
  </head>
  <body></body>
</html>`}
        {...other}
      />
      {iframeLoaded !== false
        ? ReactDOM.createPortal(
            <FramedDemo document={document} isJoy={isJoy} isolated={isolated}>
              {children}
            </FramedDemo>,
            document.body,
          )
        : null}
    </React.Fragment>
  );
}

DemoIframe.propTypes = {
  children: PropTypes.node.isRequired,
  isJoy: PropTypes.bool,
  isolated: PropTypes.bool,
  name: PropTypes.string.isRequired,
};


Review comment (performance):
The srcDoc HTML should include preconnect links for better performance, similar to how they are used in CreateReactApp.ts (lines 21-22). These links help establish early connections to the font servers, improving font loading performance.

Add these lines before the stylesheet link:
- link rel="preconnect" href="https://fonts.googleapis.com"
- link rel="preconnect" href="https://fonts.gstatic.com" crossorigin
```suggestion
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```

Code after:
function DemoIframe(props) {
  const { children, name, isJoy, isolated, ...other } = props;
  /**
   * @type {import('react').Ref<HTMLIFrameElement>}
   */
  const frameRef = React.useRef(null);

  // If we portal content into the iframe before the load event then that content
  // is dropped in firefox.
  const [iframeLoaded, onLoad] = React.useReducer(() => true, false);

  React.useEffect(() => {
    const document = frameRef.current.contentDocument;
    // When we hydrate the iframe then the load event is already dispatched
    // once the iframe markup is parsed (maybe later but the important part is
    // that it happens before React can attach event listeners).
    // We need to check the readyState of the document once the iframe is mounted
    // and "replay" the missed load event.
    // See https://github.com/facebook/react/pull/13862 for ongoing effort in React
    // (though not with iframes in mind).
    if (document != null && document.readyState === 'complete' && !iframeLoaded) {
      onLoad();
    }
  }, [iframeLoaded]);

  const document = frameRef.current?.contentDocument;
  return (
    <React.Fragment>
      <Iframe onLoad={onLoad} ref={frameRef} title={`${name} demo`} {...other} srcDoc={SRC_DOC} />
      {iframeLoaded !== false
        ? ReactDOM.createPortal(
            <FramedDemo document={document} isJoy={isJoy} isolated={isolated}>
              {children}
            </FramedDemo>,
            document.body,
          )
        : null}
    </React.Fragment>
  );
}

DemoIframe.propTypes = {
  children: PropTypes.node.isRequired,
  isJoy: PropTypes.bool,
  isolated: PropTypes.bool,
  name: PropTypes.string.isRequired,
};

function IsolatedDemo({ children, cssVarPrefix, colorSchemeNode, window }) {
  return React.cloneElement(children, {
    window,