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…
	
	Add table
		
		Reference in a new issue