Infinite loading if we just add the <SandpackPreview> inside <SandpackProvider>

[iampava]

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

It seems like the following setup results (most of the time) in infinite loading, without ever showing the result/preview:

<SandpackProvider template="vanilla-ts">
  <SandpackPreview />
</SandpackProvider>

On the other hand, if I wrap the <SandpackPreview inside a <SandpackLayout> it seems to be working:

<SandpackProvider template="vanilla-ts">
  <SandpackLayout>
    <SandpackPreview />
  </SandpackLayout>
</SandpackProvider>

https://user-images.githubusercontent.com/11327761/226484234-0fa26d34-2eb2-4271-b060-c2be4fa67932.mov

Link to sandbox: https://codesandbox.io/s/sandpack-infinite-loading-bug-vkqdd7

Your Environment

Software	Name/Version
Sandpack-client version	2.1.9
Sandpack-react version	2.1.9
Browser	Firefox
Operating System	Mac OS Ventura

[iampava]

Btw, I'm happy to contribute to this. Will find some time tomorrow, but if you can give me some pointers would be great 🙌

[DeMoorJasper]

I think it might be because of the lazyAnchorRef here (if it does not get registered it perhaps results in a loop?): https://github.com/codesandbox/sandpack/blob/1bc6276173066189ccf83bf7cc251dc0d302a6fa/sandpack-react/src/components/common/Layout.tsx#L65

The docs don't indicate you must have this so probably good to fix this, let me know if you need any help tomorrow

[iampava]

I found some time today to look into it. I tracked it into the <LoadingOverlay> component that doesn't detect that the Sandbox has loaded, so it overlays on top of the <Preview> forever.

Digging a bit further, I can see that the if I don't put the <SandpackLayout> this event never fires, that leads to the loading spinner never disapearing. But the preview underneath is actually visible.

https://github.com/codesandbox/sandpack/blob/1bc6276173066189ccf83bf7cc251dc0d302a6fa/sandpack-react/src/hooks/useLoadingOverlayState.ts#L30

I still don't know the cause, will have to dig deeper into that...

---

Offtopic: is there a way to easily run these components, for development I mean. I saw the Storybook, it's really helpful but since Storybook adds an iframe around the component I couldn't replicate the bug. So what I ended up doing was to use the components in the landing package, but their code doesn't update if I modify the react package, so I have to rebuild it again and again to test with my modifications.

[DeMoorJasper]

Just did a quick test and appears like my suspicion is right, adding the lazyAnchorRef fixes this. https://codesandbox.io/s/sandpack-infinite-loading-bug-forked-yhidlp

Will debug a bit and see if I can get rid of this requirement somehow

[iampava]

Sounds great!

Btw, is the sandbox private? I tried opening it now:

[DeMoorJasper]

Interesting seems like the default visibility of sandboxes changed to private recently, should be public now

[DeMoorJasper]

Offtopic: is there a way to easily run these components, for development I mean. I saw the Storybook, it's really helpful but since Storybook adds an iframe around the component I couldn't replicate the bug. So what I ended up doing was to use the components in the landing package, but their code doesn't update if I modify the react package, so I have to rebuild it again and again to test with my modifications.

For this we also use storybook, if you open the story in a new tab it removes the wrapping iframe (but also can't seem to reproduce this there)

[iampava]

Oh I see, so that ref wasn't initialized... Yes, it's public now, thanks.

Regarding testing in Storybook, sorry I think I got confused last night, regarding the cause. The problem is that in Storybook the bug doesn't replicate. But if I add it in the website/landing/pages/index.tsx it does. But I think we can ignore this problem, probably it's caused by the same bug... 🤷‍♂️

[danilowoz]

I believe lazyAnchorRef shouldn't be strict to the layout component either to the preview component. The whole SandpackProvider relies on this property to work properly and run the sandboxes files, and consequently, other components such as SandpackConsole or SandpackTests depends on it.

So, what about moving this logic from SandpackLayout to SandpackProvider? We could add this ref on SandpackThemeProvider which renders a div: https://github.com/codesandbox/sandpack/blob/b60bd8906db274685be195b23c6371304fb89e4c/sandpack-react/src/contexts/sandpackContext.tsx#L38-L46

@iampava, would you like to give it a try?

[iampava]

Yeah, I'd like to give it a try. Probably will find some time on Wednesday. I'll get back here with some questions if I have them :)