React 2-stage render from Promise not rendering after first promise resolved

My app sometimes receives a large volume of data it needs to parse and render. I want to parse the first couple of messages and render them to give the user something to work on while the rest of the messages parse in the background. The problem is, the first render in the image below does not result in a screen draw Chrome, Firefox, or Safari.

parse(data, show) {
    if (data === null) {
        ...
    }
    else {
       if (data.length > 100) {
          let taste = [];
          taste.push(data.pop());
          taste.push(data.pop());

          console.log('start');
          const messagePromise = this.props.parser.parseMessages(taste);
          console.log('promise 1 created');

          const restPromise = messagePromise.then(result => {
            console.log('first chunk resolved, setting state!');
            if (this.state.messageDetail === null)
                this.setState({messageDetail: result[0]});
            this.setState({parsedMessages: this.state.parsedMessages.concat(result)});
            return this.props.parser.parseMessages(data);
           });
           console.log('promise 2 created');

           restPromise.then(result => {
              console.log('second chunk resolved, setting state!');
              if (this.state.messageDetail === null)
                 this.setState({messageDetail: result[0]});
              this.setState({parsedMessages: this.state.parsedMessages.concat(result)});
        });
        console.log('leaving parse');
    }

This method parse is passed as a prop to a child component who calls it when he has some messages to parse. There are 2 other child components that display the list of messages and the details of a selected message. These components have parsedMessages and messageDetail passed as props so when the state changes here in the parent the children rerender themselves.

Anyone seen an issue where a render doesn’t result in a screen draw like this? I thought I was blocking somewhere but seeing the render in the log at 19:16:34.630 makes me think something else is going on.

I’m using latest React (15.6.1) and up-to-date browsers.

So looks like the page doesn’t draw until the onClick returns. I thought that would have happened right away, after promise 2 was created but before the resolve happened. Maybe I’m misunderstanding something about how promises work.

        <RaisedButton onClick={this.handleSubmit.bind(this)} label="Parse" style={leftButtonStyle} secondary={true} disabled={!this.state.parseEnabled}/>

handleSubmit() {
    let messages = this.state.value.split('/n');
    this.props.parser(messages, true);
}

handleSubmit() should be done when this.props.parser(…) returns, the onClick() is bound to handleSubmit() and this.props.parser() is bound to the parse() method above which we can see from the console log exits at 19:16:34:619