PlurallWait

This component encapsulates the asynchronous rendering logic present in many of our applications.

It receives a promise and render a loading animation until the promise is resolved. Then it renders the children (as a function).

How to use

You can use it with a promise:

class MyComponent extends React.Component {
  componentDidMount() {
    const requestPromise = fetch('http://qualquercoisa.com')
    this.setState({ requestPromise })
  }

  render() {
    return (
      <Wait payload={this.requestPromise}>
        {data => <div>{data}</div>}
      </Wait>
    )
  }
}

Or with a plain object:

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('http://qualquercoisa.com').then(data => {
      this.setState({ data })
    })
  }

  render() {
    return (
      <Wait payload={this.state.data}>
        {data => <div>{data}</div>}
      </Wait>
    )
  }
}