Rename 'pending' to 'waiting' and 'loading' to 'pending'.

Author: ghengeveld

README.md

@@ -382,12 +382,14 @@ is set to `"application/json"`.
 - `data` Last resolved promise value, maintained when new error arrives.
 - `error` Rejected promise reason, cleared when new data arrives.
 - `initialValue` The data or error that was provided through the `initialValue` prop.
-- `isPending` true when no promise has ever started, or one started but was cancelled.
-- `isLoading` true when a promise is currently awaiting settlement.
-- `isResolved` true when the last promise was fulfilled with a value.
-- `isRejected` true when the last promise was rejected with a reason.
 - `startedAt` When the current/last promise was started.
 - `finishedAt` When the last promise was resolved or rejected.
+- `status` One of: `waiting`, `pending`, `fulfilled`, `rejected`.
+- `isWaiting` true when no promise has ever started, or one started but was cancelled.
+- `isPending` true when a promise is currently awaiting settlement.
+- `isFulfilled` true when the last promise was fulfilled with a value.
+- `isRejected` true when the last promise was rejected with a reason.
+- `isSettled` true when the last promise was fulfilled or rejected (not waiting or pending).
 - `counter` The number of times a promise was started.
 - `cancel` Cancel any pending promise.
 - `run` Invokes the `deferFn`.
@@ -413,12 +415,6 @@ Rejected promise reason, cleared when new data arrives.
 
 The data or error that was originally provided through the `initialValue` prop.
 
-#### `isLoading`
-
-> `boolean`
-
-`true` while a promise is pending, `false` otherwise.
-
 #### `startedAt`
 
 > `Date`
@@ -431,6 +427,47 @@ Tracks when the current/last promise was started.
 
 Tracks when the last promise was resolved or rejected.
 
+#### `status`
+
+> `string`
+
+One of: `waiting`, `pending`, `fulfilled`, `rejected`.
+These are available for import as `statusTypes`.
+
+#### `isWaiting`
+
+> `boolean`
+
+`true` while no promise has started yet, or one was started but cancelled.
+
+#### `isPending`
+
+> `boolean`
+
+`true` while a promise is pending (loading), `false` otherwise.
+
+Alias: `isLoading`
+
+#### `isFulfilled`
+
+> `boolean`
+
+`true` when the last promise was fulfilled (resolved) with a value.
+
+Alias: `isResolved`
+
+#### `isRejected`
+
+> `boolean`
+
+`true` when the last promise was rejected with an error.
+
+#### `isSettled`
+
+> `boolean`
+
+`true` when the last promise was either fulfilled or rejected (i.e. not waiting or pending)
+
 #### `counter`
 
 > `number`
@@ -474,10 +511,45 @@ invoked after the state update is completed. Returns the error to enable chainin
 React Async provides several helper components that make your JSX more declarative and less cluttered.
 They don't have to be direct children of `<Async>` and you can use the same component several times.
 
-### `<Async.Loading>`
+### `<Async.Waiting>`
+
+Renders only while the deferred promise is still waiting to be run, or you have not provided any promise.
+
+#### Props
+
+- `persist` `boolean` Show until we have data, even while loading or when an error occurred. By default it hides as soon as the promise starts loading.
+- `children` `function(state: object): Node | Node` Render function or React Node.
+
+#### Examples
+
+```js
+<Async deferFn={deferFn}>
+  <Async.Waiting>
+    <p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
+  </Async.Waiting>
+</Async>
+```
+
+```js
+<Async.Waiting persist>
+  {({ error, isLoading, run }) => (
+    <div>
+      <p>This text is only rendered while the promise has not resolved yet.</p>
+      <button onClick={run} disabled={!isLoading}>
+        Run
+      </button>
+      {error && <p>{error.message}</p>}
+    </div>
+  )}
+</Async.Waiting>
+```
+
+### `<Async.Pending>`
 
 This component renders only while the promise is loading (unsettled).
 
+Alias: `<Async.Loading>`
+
 #### Props
 
 - `initial` `boolean` Show only on initial load (when `data` is `undefined`).
@@ -486,19 +558,21 @@ This component renders only while the promise is loading (unsettled).
 #### Examples
 
 ```js
-<Async.Loading initial>
+<Async.Pending initial>
   <p>This text is only rendered while performing the initial load.</p>
-</Async.Loading>
+</Async.Pending>
 ```
 
 ```js
-<Async.Loading>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Loading>
+<Async.Pending>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Pending>
 ```
 
-### `<Async.Resolved>`
+### `<Async.Fulfilled>`
 
 This component renders only when the promise is fulfilled with data (`data !== undefined`).
 
+Alias: `<Async.Resolved>`
+
 #### Props
 
 - `persist` `boolean` Show old data while loading new data. By default it hides as soon as a new promise starts.
@@ -507,11 +581,11 @@ This component renders only when the promise is fulfilled with data (`data !== u
 #### Examples
 
 ```js
-<Async.Resolved persist>{data => <pre>{JSON.stringify(data)}</pre>}</Async.Resolved>
+<Async.Fulfilled persist>{data => <pre>{JSON.stringify(data)}</pre>}</Async.Fulfilled>
 ```
 
 ```js
-<Async.Resolved>{({ finishedAt }) => `Last updated ${startedAt.toISOString()}`}</Async.Resolved>
+<Async.Fulfilled>{({ finishedAt }) => `Last updated ${startedAt.toISOString()}`}</Async.Fulfilled>
 ```
 
 ### `<Async.Rejected>`
@@ -533,39 +607,15 @@ This component renders only when the promise is rejected.
 <Async.Rejected>{error => `Unexpected error: ${error.message}`}</Async.Rejected>
 ```
 
-### `<Async.Pending>`
+### `<Async.Settled>`
 
-Renders only while the deferred promise is still pending (not yet run), or you have not provided any promise.
+This component renders only when the promise is fulfilled or rejected.
 
 #### Props
 
-- `persist` `boolean` Show until we have data, even while loading or when an error occurred. By default it hides as soon as the promise starts loading.
+- `persist` `boolean` Show old data or error while loading new data. By default it hides as soon as a new promise starts.
 - `children` `function(state: object): Node | Node` Render function 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 persist>
-  {({ error, isLoading, run }) => (
-    <div>
-      <p>This text is only rendered while the promise has not resolved yet.</p>
-      <button onClick={run} disabled={!isLoading}>
-        Run
-      </button>
-      {error && <p>{error.message}</p>}
-    </div>
-  )}
-</Async.Pending>
-```
-
 ## Usage examples
 
 Here's several examples to give you an idea of what's possible with React Async. For fully working examples, please

src/Async.js

@@ -179,47 +179,47 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
   }
 
   /**
-   * Renders only when deferred promise is pending (not yet run).
+   * Renders only when deferred promise is waiting (promise has not yet run).
    *
    * @prop {Function|Node} children Function (passing state) or React node
-   * @prop {boolean} persist Show until we have data, even while loading or when an error occurred
+   * @prop {boolean} persist Show until we have data, even while pending (loading) or when an error occurred
    */
-  const Pending = ({ children, persist }) => (
+  const Waiting = ({ children, persist }) => (
     <Consumer>
       {state => {
         if (state.data !== undefined) return null
-        if (!persist && state.isLoading) return null
+        if (!persist && state.isPending) return null
         if (!persist && state.error !== undefined) return null
         return isFunction(children) ? children(state) : children || null
       }}
     </Consumer>
   )
 
   if (PropTypes) {
-    Pending.propTypes = {
+    Waiting.propTypes = {
       children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
       persist: PropTypes.bool,
     }
   }
 
   /**
-   * Renders only while loading.
+   * Renders only while pending (promise is loading).
    *
    * @prop {Function|Node} children Function (passing state) or React node
    * @prop {boolean} initial Show only on initial load (data is undefined)
    */
-  const Loading = ({ children, initial }) => (
+  const Pending = ({ children, initial }) => (
     <Consumer>
       {state => {
-        if (!state.isLoading) return null
+        if (!state.isPending) return null
         if (initial && state.data !== undefined) return null
         return isFunction(children) ? children(state) : children || null
       }}
     </Consumer>
   )
 
   if (PropTypes) {
-    Loading.propTypes = {
+    Pending.propTypes = {
       children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
       initial: PropTypes.bool,
     }
@@ -229,21 +229,21 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    * Renders only when promise is resolved.
    *
    * @prop {Function|Node} children Function (passing data and state) or React node
-   * @prop {boolean} persist Show old data while loading
+   * @prop {boolean} persist Show old data while pending (promise is loading)
    */
-  const Resolved = ({ children, persist }) => (
+  const Fulfilled = ({ children, persist }) => (
     <Consumer>
       {state => {
         if (state.data === undefined) return null
-        if (!persist && state.isLoading) return null
+        if (!persist && state.isPending) return null
         if (!persist && state.error !== undefined) return null
         return isFunction(children) ? children(state.data, state) : children || null
       }}
     </Consumer>
   )
 
   if (PropTypes) {
-    Resolved.propTypes = {
+    Fulfilled.propTypes = {
       children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
       persist: PropTypes.bool,
     }
@@ -253,13 +253,13 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    * Renders only when promise is rejected.
    *
    * @prop {Function|Node} children Function (passing error and state) or React node
-   * @prop {boolean} persist Show old error while loading
+   * @prop {boolean} persist Show old error while pending (promise is loading)
    */
   const Rejected = ({ children, persist }) => (
     <Consumer>
       {state => {
         if (state.error === undefined) return null
-        if (state.isLoading && !persist) return null
+        if (state.isPending && !persist) return null
         return isFunction(children) ? children(state.error, state) : children || null
       }}
     </Consumer>
@@ -272,16 +272,43 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
   }
 
-  Async.Pending = Pending
-  Async.Loading = Loading
-  Async.Resolved = Resolved
-  Async.Rejected = Rejected
+  /**
+   * Renders only when promise is fulfilled or rejected.
+   *
+   * @prop {Function|Node} children Function (passing state) or React node
+   * @prop {boolean} persist Show old data or error while pending (promise is loading)
+   */
+  const Settled = ({ children, persist }) => (
+    <Consumer>
+      {state => {
+        if (state.isWaiting) return null
+        if (state.isPending && !persist) return null
+        return isFunction(children) ? children(state) : children || null
+      }}
+    </Consumer>
+  )
+
+  if (PropTypes) {
+    Settled.propTypes = {
+      children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+      persist: PropTypes.bool,
+    }
+  }
+
+  Waiting.displayName = `${displayName}.Waiting`
+  Pending.displayName = `${displayName}.Pending`
+  Fulfilled.displayName = `${displayName}.Fulfilled`
+  Rejected.displayName = `${displayName}.Rejected`
+  Settled.displayName = `${displayName}.Settled`
 
   Async.displayName = displayName
-  Async.Pending.displayName = `${displayName}.Pending`
-  Async.Loading.displayName = `${displayName}.Loading`
-  Async.Resolved.displayName = `${displayName}.Resolved`
-  Async.Rejected.displayName = `${displayName}.Rejected`
+  Async.Waiting = Waiting
+  Async.Pending = Pending
+  Async.Loading = Pending // alias
+  Async.Fulfilled = Fulfilled
+  Async.Resolved = Fulfilled // alias
+  Async.Rejected = Rejected
+  Async.Settled = Settled
 
   return Async
 }