Fallback overlaps HTML from ssr

[ops1ops]

Hello, im using loadable with rails ssr, so i faced the problem when my html being loaded for a while and then loadable shows fallback (so whole html become white), so question is can i disable this behavior or maybe im missing something in cofiguration

[open-collective-bot]

Hey @ops1ops 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[theKashey]

Sounds like you are not waiting for loadableReady

[ops1ops]

@theKashey you mean that i should mount (hydrate) my components in passed callback of loadableReady (according to example with NodeJS SSR), but if i do this how to start loading components? I mean when i mount components -> loadable starts working and fetching chunks, but if i move it to loadableReady, chunks are not event loaded

upd. ive researched better the example and seems that server knows loadable components chunks and with html he sends them, so thats why loadableReady works, please let me know if i missed something

[theKashey]

That's all correct - you have to configure ChunkExtractor on the server and wait using loadableReady for their load.
Sounds like you've skipped 2 most major steps for SSR :)

[ops1ops]

Thanks for help, closing the issue

[aligulen]

it seems that fallback makes hydration borken.
Before script fully loaded fallback changes html structure (in order prevent showing empty page) but it puts something else from SSR and then react hydration broken because html totally changed.

[theKashey]

this is true for React<17. One has to use fallback={null} for any Suspense boundaries during the initial hydration.
For React>=17, with "server side Suspense", no such magic is required.

The issue affects all React versions after 16.10 - atlassian-labs/react-loosely-lazy#46