Add easy async component.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
70a2887d76
commit
c1d9036d4c
1 changed files with 24 additions and 0 deletions
|
@ -118,3 +118,27 @@ export function Await<T>({ async, children, fallback }: {
|
|||
// Promise is fulfilled, rendering the children with result data.
|
||||
return children(async.data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Easy async component with fallback and fulfilled children render.
|
||||
* @param promise The promise.
|
||||
* @param children Renderer function of the children, takes promised data as argument.
|
||||
* @param fallback Content shown when the promise is not fulfilled yet.
|
||||
* @constructor
|
||||
*/
|
||||
export function Async<T>({promise, fallback, children}: {
|
||||
promise: Promisable<T>|PromiseFn<T>;
|
||||
children: (async: T) => React.ReactElement;
|
||||
fallback?: React.ReactElement;
|
||||
})
|
||||
{
|
||||
// Get async data from given promise.
|
||||
const async = useAsync(promise, [promise]);
|
||||
|
||||
return (
|
||||
// Wait for promised data.
|
||||
<Await async={async} fallback={fallback ?? undefined}>
|
||||
{children}
|
||||
</Await>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue