3 ms·

Do lazy + Suspense replace the react-loadable [1] package? [1]: https://github.com/jamiebuilds/react-loadable https://github.com/jamiebuilds/react-loadable

danabramov 8y ago
If you don't do server rendering (which lazy doesn't support yet) then you can use them as a replacement, yes.
ianschmitz 8y ago
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 8y ago
  Is this planned for the Suspense API?
  - danabramov 8y ago
    >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-16.html https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-... That's our end game.

danabramov 8y ago

If you don't do server rendering (which lazy doesn't support yet) then you can use them as a replacement, yes.

ianschmitz 8y ago

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 8y ago
Is this planned for the Suspense API?
- danabramov 8y ago
  >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-16.html https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-... That's our end game.