Fetching Data In React: code redactor is loading unreponsibly

[Stan-tab]

Checks

• [x] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

Describe your suggestion

Code editor is loading while the main page is already loaded. The issue is when I read the article i accidentaly go to the part of code editor when it finishes loading and it is really unconvenient. P.s. if you find out how to solve it can u respond to me, just for academic knowledge

Path

Other / NA

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-fetching-data-in-react

(Optional) Discord Name

No response

(Optional) Additional Comments

Have a nice day

[joayo13]

From what I could figure out codesandbox uses a focus() in its editor, which makes sense in the regular context of using a codesandbox, but in the case of using it in the iframe it will cause this automatic jumping to focus the input. There were no options I could find within iframe or codesandbox optional params to disable this behavior. As far as I can tell it's just the intended behavior of codesandbox.

[wise-king-sullyman]

Thanks for making this issue!

Yeah..... that doesn't make for a great experience.

@joayo13 would you have any interest in looking into this further? No pressure to do so, but if you'd like to I'm happy to assign you. If you can't find anything even after digging into it more we can always unassign you of course 🙂

[joayo13]

@wise-king-sullyman Yes, I'd be glad to do a deeper dive!

[wise-king-sullyman]

@joayo13 assigned, thank you!

[joayo13]

After doing some research, this behavior is only present with VM Sandboxes (formerly called Devboxes). The only solution I could come up with is for us to instead use the regular Sandboxes for our example.

We can even see that in their official docs for VM Sandboxes, it steals the input the same way with their embedded example. https://codesandbox.io/docs/learn/vm-sandboxes/embedding#embedding-vm-sandboxes

It's in beta right now so maybe in the future we'll get some more customization options.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[mao-sz]

Going to merge https://github.com/TheOdinProject/curriculum/issues/28930 with this one by marking it as a duplicate of this, since they effectively are duplicates.

Will repost comment from there with edits

[mao-sz]

Reposting from https://github.com/TheOdinProject/curriculum/issues/28930#issuecomment-3567100669

@wise-king-sullyman had a little look at docs and played around with VM sandboxes (formerly devboxes) and Browser sandboxes (what this issue is referring to as sandboxes).

We could technically run some of the basic React examples with a browser sandbox, they'd have to be made with create-react-app (now deprecated) and not the way our course does things with Vite. Note sure exactly what's different about react-scripts that allows it to use Webpack behind the scenes in the browser itself...but meh. Mainly though, embedded Browser sandboxes are still in beta and come with limitations like not being able to edit them without signing in. So that aspect isn't any different from the current VM sandboxes.

This hasn't really been a repeat issue raised in the community at all, for context.

Not sure on best approach. I'm not convinced Browser Sandboxes are the way forward - not a full fix. We could look at alternative sites we can embed e.g. Stackblitz, but I haven't the time to investigate that fully, so I have no idea how viable it'd be and whether it'd actually resolve the problems detailed in both issues.