Add async components demo and improve async state update when given argument is not a promise.

demo/DemoApp.tsx

@@ -34,6 +34,8 @@ import {ModalType} from "../src/Components/Modals/ModalsTypes";
 import {Buttons} from "../src/Components/Buttons/Buttons";
 import {useNotify} from "../src/Components/Notifications/Notifications";
 import {Notification, NotificationType} from "../src/Components/Notifications/Notification";
+import {Box} from "../src/Components/Box";
+import {Await, useAsync} from "../src/Async";
 
 export function DemoApp()
 {
@@ -57,6 +59,14 @@ export function DemoApp()
 
 	const [page, setPage] = useState(11);
 
+	const [asyncChange, setAsyncChange] = useState(0);
+	const [anotherChange, setAnotherChange] = useState(0);
+	const [asyncData] = useAsync<string>(() => new Promise((resolve, reject) => {
+		setTimeout(() => {
+			resolve("async data (" + Math.random() + ")");
+		}, 2000);
+	}), [asyncChange]);
+
 	return (
 		<Application>
 			<MainMenu>
@@ -88,17 +98,19 @@ export function DemoApp()
 
 			<h2>Headings</h2>
 
-			<h1>Demo app</h1>
+			<Box>
+				<h1>Demo app</h1>
 
-			<h2>Second title</h2>
+				<h2>Second title</h2>
 
-			<h3>Third title</h3>
+				<h3>Third title</h3>
 
-			<h4>Fourth title</h4>
+				<h4>Fourth title</h4>
 
-			<h5>Fifth title</h5>
+				<h5>Fifth title</h5>
 
-			<h6>Sixth title</h6>
+				<h6>Sixth title</h6>
+			</Box>
 
 			<h2>Buttons</h2>
 
@@ -550,6 +562,19 @@ export function DemoApp()
 				<button className={"flat"} onClick={() => { notify(<Notification>Test notification</Notification>); }}>Generic notification</button>
 			</Card>
 
+			<h2>Async</h2>
+
+			<Card>
+				Async data test:
+				<Await async={asyncData} fallback={<SpinningLoader />}>
+					{(data) => (
+						<p>Data: {data}</p>
+					)}
+				</Await>
+				<button type={"button"} onClick={() => setAsyncChange(asyncChange + 1)}>Change</button>
+				<button type={"button"} onClick={() => setAnotherChange(anotherChange + 1)}>Another change</button>
+			</Card>
+
 		</Application>
 	);
 }

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "1.4.1",
+	"version": "1.4.2",
 	"name": "@kernelui/core",
 	"description": "Kernel UI Core.",
 	"scripts": {

src/Async.tsx

@@ -70,8 +70,15 @@ export function useAsync<T>(promise: Promisable<T>|PromiseFn<T>, deps: any[] = [
 	// Reconfigure the promise when any deps have changed.
 	useEffect(() => {
 		if (!(promise instanceof Promise))
-			// If it's not a promise, there is nothing to wait for.
+		{ // If it's not a promise, there is nothing to wait for.
+			updateState({
+				pending: false,
+				promise: promise as Promisable<T>,
+				error: undefined,
+				data: promise as T,
+			});
 			return;
+		}
 
 		promise.then((result) => {
 			// When there is a result, disable pending state and set retrieved data, without error.