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.
|
// Promise is fulfilled, rendering the children with result data.
|
||||||
return children(async.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