Skip to content

Commit 195f4aa

Browse files
committed
Add 'persist' option to Pending helper so it can also show while loading for the first time.
1 parent 8ff769c commit 195f4aa

File tree

2 files changed

+18
-4
lines changed

2 files changed

+18
-4
lines changed

README.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,8 @@ Renders only while the deferred promise is still pending (not yet run).
268268

269269
#### Props
270270

271-
- `children` {Function|Node} Function which receives props object or React node
271+
- `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.
272+
- `children` {Function|Node} Function which receives props object or React node.
272273

273274
#### Examples
274275

@@ -281,7 +282,17 @@ Renders only while the deferred promise is still pending (not yet run).
281282
```
282283

283284
```js
284-
<Async.Pending>{({ run }) => <button onClick={run}>Run</button>}</Async.Pending>
285+
<Async.Pending persist>
286+
{({ error, isLoading, run }) => (
287+
<div>
288+
<p>This text is only rendered while the promise has not resolved yet.</p>
289+
<button onClick={run} disabled={!isLoading}>
290+
Run
291+
</button>
292+
{error && <p>{error.message}</p>}
293+
</div>
294+
)}
295+
</Async.Pending>
285296
```
286297

287298
## Acknowledgements

src/index.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,15 @@ export const createInstance = (defaultProps = {}) => {
113113
/**
114114
* Renders only when deferred promise is pending (not yet run).
115115
*
116+
* @prop {boolean} persist Show until we have data, even while loading or when an error occurred
116117
* @prop {Function|Node} children Function (passing error and props) or React node
117118
*/
118-
Async.Pending = ({ children }) => (
119+
Async.Pending = ({ children, persist }) => (
119120
<Consumer>
120121
{props => {
121-
if (props.isLoading || props.data || props.error) return null
122+
if (props.data !== undefined) return null
123+
if (!persist && props.isLoading) return null
124+
if (!persist && props.error !== undefined) return null
122125
return typeof children === "function" ? children(props) : children || null
123126
}}
124127
</Consumer>

0 commit comments

Comments
 (0)