feat: support reactive dynamic loadable

[gregberge]

Closes #284

[gregberge]

@theKashey could you review it please?

[theKashey]

I would like to make it a bit more complex:

• an option to display old Component while a new one is loading. It could be an option to a LoadingComponent. The problem - right now you are loosing cacheKey and unable to refer to a prev data
• if cacheKey got changed during loading - it would not cancel loadAsync and it would update component. You have to add more checks (more about store ref to a promise created, and compare it with the current one).
• theoretically you shall not display old component with a new props, if a new component should be displayed instead. What about using getDerivedStateFromProps to derive state.props from props, and freeze them, if state.usedCacheKey!==state.cacheKey.

This would be needed only for .1, as long as it's much easier to add some cache-key logic in a render (still having old cache-key in a state). But, in the same time, this logic would ruin all the structure, unless implemented in hooks.

Oh, it really could become a bit complicated.

[gregberge]

an option to display old Component while a new one is loading. It could be an option to a LoadingComponent. The problem - right now you are loosing cacheKey and unable to refer to a prev data

It is not the responsibility of this component, it could be done in userland I think.

if cacheKey got changed during loading - it would not cancel loadAsync and it would update component. You have to add more checks (more about store ref to a promise created, and compare it with the current one).

Yeah you are right!

theoretically you shall not display old component with a new props, if a new component should be displayed instead. What about using getDerivedStateFromProps to derive state.props from props, and freeze them, if state.usedCacheKey!==state.cacheKey.

Yes you are right, I think getDerivedStateFromProps is a good workaround.

[luishdz1010]

Glad this got in!

I'm trying to implement keeping the old component mounted while loading in userland and it works fine, however one issue I cannot seem to move past is that there is always a loading phase, even if both components have already loaded.

I'd expect a seamless switch between them, like:

CompB -> CompB

But currently it goes:

CompA -> fallback (loading === true) -> CompB

Even if both CompA and CompB were previously loaded. If using loadable.lib, then the children-as-a-function prop gets "skipped" for a brief moment until the next render (which happens immediately). This causes problems with animations because it unmounts/mounts the whole tree under loadable.lib.

Just wanted to point this out for future readers seeking a solution to this, I understand fixing this may be a bit more complex than acceptable.

[gregberge]

Hello @luishdz1010, for now, yes it will switch to loading state for a very small time. But even if it was not the case, the component will still be mounted / unmounted and it will not solve your animation problem.

To display the previous component during loading, the strategy will be the same as a Transition Group. You have to check when the component will change and keep displaying the previous one until the new one is ready (fallback has disappeared).