Add <Async.Pending> helper for not-yet-invoked deferFn.

Author: ghengeveld

README.md

@@ -205,7 +205,7 @@ They don't have to be direct children of `<Async>` and you can use the same comp
 
 ### `<Async.Loading>`
 
-Renders only while the promise is still pending.
+Renders only while the promise is loading.
 
 #### Props
 
@@ -262,6 +262,28 @@ Renders only when the promise is rejected.
 <Async.Rejected>{({ error }) => `Unexpected error: ${error.message}`}</Async.Rejected>
 ```
 
+### `<Async.Pending>`
+
+Renders only while the deferred promise is still pending (not yet run).
+
+#### Props
+
+- `children` {Function|Node} Function which receives props object or React node
+
+#### Examples
+
+```js
+<Async deferFn={deferFn}>
+  <Async.Pending>
+    <p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
+  </Async.Pending>
+</Async>
+```
+
+```js
+<Async.Pending>{({ run }) => <button onClick={run}>Run</button>}</Async.Pending>
+```
+
 ## Acknowledgements
 
 Many thanks to Andrey Popp for handing over ownership of `react-async` on npm.

src/index.js

@@ -110,6 +110,20 @@ export const createInstance = (defaultProps = {}) => {
     }
   }
 
+  /**
+   * Renders only when deferred promise is pending (not yet run).
+   *
+   * @prop {Function|Node} children Function (passing error and props) or React node
+   */
+  Async.Pending = ({ children }) => (
+    <Consumer>
+      {props => {
+        if (props.isLoading || props.data || props.error) return null
+        return typeof children === "function" ? children(props) : children || null
+      }}
+    </Consumer>
+  )
+
   /**
    * Renders only while loading.
    *

src/spec.js

@@ -235,7 +235,7 @@ test("Async.Resolved renders only after the promise is resolved", async () => {
   expect(queryByText("done")).toBeInTheDocument()
 })
 
-test("Async.Loading renders only while the promise is pending", async () => {
+test("Async.Loading renders only while the promise is loading", async () => {
   const promiseFn = () => resolveTo("ok")
   const { getByText, queryByText } = render(
     <Async promiseFn={promiseFn}>
@@ -248,6 +248,23 @@ test("Async.Loading renders only while the promise is pending", async () => {
   expect(queryByText("loading")).toBeNull()
 })
 
+test("Async.Pending renders only while the deferred promise is pending", async () => {
+  const deferFn = () => resolveTo("ok")
+  const { getByText, queryByText } = render(
+    <Async deferFn={deferFn}>
+      <Async.Pending>{({ run }) => <button onClick={run}>pending</button>}</Async.Pending>
+      <Async.Loading>loading</Async.Loading>
+      <Async.Resolved>done</Async.Resolved>
+    </Async>
+  )
+  expect(queryByText("pending")).toBeInTheDocument()
+  fireEvent.click(getByText("pending"))
+  expect(queryByText("pending")).toBeNull()
+  expect(queryByText("loading")).toBeInTheDocument()
+  await waitForElement(() => getByText("done"))
+  expect(queryByText("loading")).toBeNull()
+})
+
 test("Async.Rejected renders only after the promise is rejected", async () => {
   const promiseFn = () => rejectTo("err")
   const { getByText, queryByText } = render(