Wait to render component until data is fetched

[captainill]

I'd like to be able to show a loader in response to an action while data is fetched and wait for the response to render a component. This is a hot topic over in the react-router repo. Have you guys talked about this? Is there a solution currently?

[Vijar]

Currently this can be accomplished by dispatching two actions(*_START and *_END) from within the ActionCreator, one before the async data fetch and one on success/failure. Then your store( and thus component) can show a loader once it receives the first action and remove the loader on the second action.

You can find the first and the second actions in our chat example's action creator.

[captainill]

Ah the dispatching events makes perfect sense for the loader. I've got a top level loader hooked up to my ApplicationStore now that can be toggled when navigating.

The harder part is making sure a components store is populated before I render it. I don't want to show an initial empty state before data loads. In my research I'm seeing react apps making async calls in the components getInitialState method but even if this was an option I want that state in the store. I'm unsure how/if I can achieve this.

[mridgway]

This works on the client-side but unfortunately not on the server-side. getInitialState and any other lifecycle events that React provides are all synchronous, so there is no room for firing actions and making IO calls.

It's also impossible for us to analyze the component tree at run time because there's no access to the tree before it's converted to a string during renderToString.

I feel like this is one of the major gaps for isomorphic applications using React. There's an open issue discussing possible solutions here but there's no real silver bullet yet.

For now, we're maintaining a static hierarchy outside of React the describes the controller views that will be on a page. From this hierarchy we're able to determine which actions need to be fired before renderToString is called. It's not ideal, I'd like to be using the component tree as the source of truth, but this is what we're doing for now.

[captainill]

I see. I haven't been able to experiment too much yet but was hoping I would be able to set something up using promises to achieve this.

With React-router I'm able to use the willTransitionTo() method to achieve what I'm after. This method specifically. But I'm just using react-router for the CMS portion of my app which doesn't need to be server rendered.

[jardakotesovec]

While investigating what the current options are. I came across this example https://github.com/rackt/react-router/blob/master/docs/api/run.md#stateroutes

Triggering fetch actions from Route objects seems like nice solution and it can be traversed before actual rendering. Assumption basically is that URL should represent which view-controllers will show up. If react component makes decision to show something else (that require more async data) based on some other data (like parameter in url or retrieved data).. it would go wrong..

[mmahalwy]

@mridgway can you provide an example of the static hierarchy to wait for?

I think something that could be powerful is to always have a flag of 'wait for this action to finish, every time' or 'these must finish' before renderToString.