Suspense almost (but not quite!) working?

[williamsdyyz]

Hi. I have an existing React project that relies on lazy and Suspense for code splitting. I tried switching it over to Preact with Compat.

Firstly, I'm totally blown away that it 99% works with nothing more than some Webpack and Typescript aliasing. Very nice!

In fact I can only find one problem:

Some nested Suspense components don't immediately render when the lazy component is loaded. The Fallback shows correctly, the component is loaded, but no re-render.
If the page renders for another reason, say a component updates on a timer, the lazily loaded component magically appears.

I know that Preact's Suspense is experimental, so I'm not totally surprised I'm having issues. I'm just wondering if anyone else has seen this and found a work-around?

UPDATE:
I think I've narrowed this down a bit. I'm using the Material UI library (mui.com). Everywhere I see the Suspense problem it's a lazy loaded Dialog component. MUI dialogs are rendered to a Portal by default. If I turn that behavior off with the disablePortal attribute, everything works as expected.

So it seems to be something about Suspense not re-rendering Portals?

[rschristian]

Any chance you have a minimal example?

[marvinhagemeister]

@williamsdyyz If you can share a reproduction that would be awesome! Would help us tremendously in resolving this.

[williamsdyyz]

I'll try to reproduce the problem with a small project. The existing one is too big - hence the need for lazy/suspense!

[williamsdyyz]

OK, this is as small as I can make it:
https://github.com/williamsdyyz/preact-suspense.git

Ignore my previous comments about Portals. They aren't required to reproduce.
I couldn't reproduce with a simple component, I had to use MUI Dialog.

index.jsx renders a small component that lazy loads a second component which is a MUI Dialog
You will see that the fallback renders but the dialog doesn't
There is a timer which will force a render after 10 seconds. This is when the dialog magically appears.
It looks like the HTML is added to the DOM but a subsequent style change isn't applied until the next re-render.

[JoviDeCroock]

This is fixed in 10.20.2, sorry for the inconvenience

[williamsdyyz]

Awesome. Thank you!