Component halts rendering when loading remote state from Container

[anthonator]

When mounting a component that requires data be fetched remotely using a container/store/query the component will stop rendering until the data is fetched. This effectively prevents me from having the ability to show load states. I just have empty areas on the page where components should be.

Component

render() {
    let component;

    if (this.props.loading) {
      component = this._renderLoading();
    } else {
      component = this._renderConversations();
    }

    return (
      <div className='conversations panel left'>
        { component }
      </div>
    );
  }

Container

return Marty.createContainer(Component, {
    listenTo: ConversationStore,

    fetch: {
      conversations() {
        return ConversationStore.for(this).all();
      },

      loading() {
        return ConversationStore.for(this).isLoading(ConversationConstants.FETCH_ALL_CONVERSATIONS);
      }
    }
  });

[anthonator]

If I put a console.log in the render() method nothing shows up in the console until the remote fetch has completed.

[anthonator]

Just discovered pending in containers. Fixes my problem.

[taion]

FWIW, looking at this a bit, it does seem like it might be tricky to deal with pending when there are potentially multiple data fetches outstanding. Maybe best to just use multiple containers in that case.

[jhollingworth]

FYI We pass any finished fetches into the pending handler if you want to define default values

[taion]

My bad. Could be worth updating the docs to reflect this, then, unless they already say this and I just missed it.

[jhollingworth]

That feature is only 4 days old (#300), It's in the v0.10 docs but will back port to v0.9 over the weekend

[taion]

Ah! That makes sense then. Thanks!