[docs-infra] Use embed as the default for opening CodeSandbox

[siriwatknp]

Before: https://deploy-preview-43616--material-ui.netlify.app/material-ui/react-button/#basic-button

It opens a devbox experience. The loading time is longer than the embed version. It takes ~12sec to see the demo.
Note that the devbox cannot be open with an initial file.

Screen.Recording.2567-09-05.at.16.09.22.mov

After: https://deploy-preview-43618--material-ui.netlify.app/material-ui/react-button/#basic-button

The embed version is editable and feels faster. It takes ~4sec to see the demo. By changing to embed mode, we can target the initial file to open.

Screen.Recording.2567-09-05.at.16.10.34.mov

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43618--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 46d8618

[alexfauquette]

Thanks, this waiting time to access CodeSandbox was quite annoying 👍

[siriwatknp]

Thanks, this waiting time to access CodeSandbox was quite annoying 👍

Thanks, I thought that it was only me that get annoy with the devbox experience haha.

[siriwatknp]

I marked this as regression because opening with the initial file was working before.

[siriwatknp]

embed has changed from file to module. There is no documentation, I have to get the embed to know that it's changed.

Eg:

<iframe src="https://codesandbox.io/embed/9sc876?view=editor+%2B+preview&module=%2FSignIn.tsx"
     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
     title="recursing-rain-9sc876"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

[oliviertassinari]

It looks like the same regression as in codesandbox/codesandbox-client#8299, which was introduced again. The main problem seems to not be able to show the right source file right away, as well as the right browser preview port.

As for the loading speed, yeah in the video below, it's 5s vs. 3s. Not a huge concern though, it's painful to have to click on "Edit Sandbox" now to share the changes.

Screen.Recording.2024-09-08.at.00.00.31.mov

I raised the problem again to the CodeSandbox team on that same, they should be aware of this: codesandbox/codesandbox-client#8597. I think that we should revert this PR once they fix it.