Add support for placeholder function

docs/Details.md

@@ -36,9 +36,9 @@ based on your opinion or particular task.
 
 When an async component is mounted, async function is executed. Initially,
 mounted component will render nothing, since async function hasn't been
-resolved or rejected yet. You can set your `placeholder` for the pending state,
-check Dependency Injection docs below. Once async function is resolved, the
-thing it returned will be rendered instead of placeholder. Whenever you pass
+resolved or rejected yet. You can set your `placeholder` for the pending state
+by passing a function as the second argument. Once async function is resolved,
+the thing it returned will be rendered instead of placeholder. Whenever you pass
 new props to an async component it will switch to pending state and execute
 async function again.
 

modules/Coroutine.js

@@ -2,11 +2,11 @@ import { PureComponent } from 'react';
 
 export default { create };
 
-function create(coroutine) {
+function create(coroutine, placeholder) {
   class Coroutine extends PureComponent {
     constructor(props) {
       super(props);
-      this.state = { view: null };
+      this.state = { view: null, loading: true };
       this.iterator = null;
     }
 
@@ -16,7 +16,7 @@ function create(coroutine) {
       this.iterator = target;
 
       let shouldStop = () => this.iterator !== target;
-      let updateView = view => this.setState({ view });
+      let updateView = view => this.setState({ view, loading: false });
 
       if (target && typeof target.then === 'function') {
         // coroutine is Async Function, awaiting for the final result
@@ -40,6 +40,9 @@ function create(coroutine) {
         this.iterate(this.props);
       }
 
+      // Render a placeholder if we have one
+      if(this.state.loading && placeholder) return placeholder(this.props)
+
       return this.state.view;
     }
   }