From dd91d8dcfc043644a8fafb420b27d655733a3a9d Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Wed, 25 Sep 2024 09:56:55 +0200
Subject: [PATCH] Add async components demo and improve async state update when
 given argument is not a promise.

---
 demo/DemoApp.tsx | 37 +++++++++++++++++++++++++++++++------
 package.json     |  2 +-
 src/Async.tsx    |  9 ++++++++-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index c5b3d36..f340785 100644
--- a/demo/DemoApp.tsx
+++ b/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>
 	);
 }
diff --git a/package.json b/package.json
index f9a79d6..0951e39 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.4.1",
+	"version": "1.4.2",
 	"name": "@kernelui/core",
 	"description": "Kernel UI Core.",
 	"scripts": {
diff --git a/src/Async.tsx b/src/Async.tsx
index 950fc99..52886e6 100644
--- a/src/Async.tsx
+++ b/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.