[ianschmitz]

One nice feature of react-loadable is that you can specify a threshold (300 ms by default I think) which is used to prevent rendering of the loader until after the threshold is passed so you don't get a flash of the loader. Users can perceive it as being slower if you have a quick flash of a loader then show the component.

I haven't seen anything yet about the Suspense component supporting this. I imagine you could wrap the suspense component with your own to achieve this behavior, but it's nice not to have to reimplement.

[hoppelhase]

Is this planned for the Suspense API?

[danabramov]

>One nice feature of react-loadable is that you can specify a threshold (300 ms by default I think) which is used to prevent rendering of the loader until after the threshold is passed so you don't get a flash of the loader. Users can perceive it as being slower if you have a quick flash of a loader then show the component.

There is more nuance to it — essentially, React Loadable renders a _hole_ instead of the spinner in this case. Which isn't much better than a spinner because you still see the intermediate state.

With the current release of Suspense, you can do it if your fallback component renders spinner after a timer. So that's not difficult. But we also don't think it's good either.

Instead, when we release Concurrent Mode, you can _avoid showing the change altogether_ until a certain threshold passes. That's the `maxDuration` prop (which doesn't do anything outside of Concurrent Mode).

So you don't even show a hole. Instead, the whole UI is "suspended". And then the fallback kicks in if takes too long.

This might be a bit hard to imagine since no mainstream UI library can do this yet. So you might want to check the second half of my talk (on Suspense) to get a sense for what it's like: https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-...

That's our end game.