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

Code before:
   * @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`} srcDoc={SRC_DOC} {...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,
};

function IsolatedDemo({ children, cssVarPrefix, colorSchemeNode, window }) {
  return React.cloneElement(children, {
    window,
    cssVarPrefix,
    colorSchemeNode: window ? window().document.documentElement : colorSchemeNode,
    colorSchemeSelector: 'class',

Review comment (suggestion):
The srcDoc attribute should be placed after the spread operator {...other} to prevent it from being accidentally overridden by props passed from parent components. In React, when props are spread, they override any props defined before them. Since srcDoc is essential for loading the Roboto font, it should be the last prop to ensure it always takes precedence.

Move srcDoc to after {...other} like this:
<Iframe onLoad={onLoad} ref={frameRef} title={`${name} demo`} {...other} srcDoc={SRC_DOC} />
```suggestion
      <Iframe onLoad={onLoad} ref={frameRef} title={`${name} demo`} {...other} srcDoc={SRC_DOC} />
```

Code after:
   * @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,
    cssVarPrefix,
    colorSchemeNode: window ? window().document.documentElement : colorSchemeNode,
    colorSchemeSelector: 'class',