Fix pyodide loading without using beforeInteractive loading strategy

[kennethcassel]

Using beforeInteractive in the next.js script component fixed the pyodide loading issue but now the experience of using the site is frustrating.

Site does the initial render but you can't scroll until pyodide loads.

Ideally we'd have some sort of loading indicator and let a user scroll on the site instead of making it hang

[mcintyre94]

Ah that's rubbish, sorry! Do you see this on desktop browsers or only mobile? I'm only seeing it on iOS (don't have any other devices to check it on), but it seems okay on desktop:

runwasm-scroll.mov

In terms of loading indicators I did add something very basic for the matplotlib one:

runwasm-matplotlib-load.mov

We could easily add the Loading Pyodide... part of that for the main page (or a better loading indicator!)

But for that one scrolling is frozen (on mobile only for me) during the load pyodide + load matplotlib.

I'm wondering if this might be a problem with mobile + useEffect? It's a bit tricky to tell though because we have no visual indicator when that beforeInteractive script is loaded. And depends which devices you're seeing it on too.

[kennethcassel]

Ah okay shouldn't have just assumed it was due to beforeInteractive.

I'm only seeing it on iOS mobile safari.

[mcintyre94]

I made a create-react-app project that has a useEffect fetching http://httpbin.org/delay/10 and then updating UI - on iOS Safari scrolling stays responsive (and the default spinning logo keeps spinning) during that delay. So my best guess is that the CPU is getting throttled during the load, which seems.. surprising for iOS.

Out of interest what device are you seeing this on? I'm on an iPhone XR so a few years old.

FWIW I can also repro this on a checkout of 74d8565 (the last commit before any of mine today) - site goes unresponsive and won't scroll until the run code button is displayed.

[kennethcassel]

I'm on iPhone XS 14.71

[mcintyre94]

Pretty similar then, probably the same CPU. It’d be good to hear from someone on a newer device or any android device to see if we can narrow it down at all.

[hatemhosny]

BrowserStack offers free plan for open source projects.

This can help in testing across multiple devices

[shadab14meb346]

For me, scrolling is frozen on during only the Loading Pyodide...

Using it on mobile google chrome.
I am on Andriod below are my phone configs.