From 2a37f843ca42ba13d12eef1eeab5dc50a0e251e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Mon, 30 Jun 2025 22:04:03 +0200
Subject: [PATCH] AsyncProvider

---
 .../src/ReactManagedRuntime.ts                | 39 +++++++++++++++++++
 .../src/routes/effect-component-tests.tsx     |  4 +-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/effect-components/src/ReactManagedRuntime.ts b/packages/effect-components/src/ReactManagedRuntime.ts
index d964e94..0266b62 100644
--- a/packages/effect-components/src/ReactManagedRuntime.ts
+++ b/packages/effect-components/src/ReactManagedRuntime.ts
@@ -15,6 +15,7 @@ export const make = <R, ER>(
     context: React.createContext<Runtime.Runtime<R>>(null!),
 })
 
+
 export interface SyncProviderProps<R, ER> {
     readonly runtime: ReactManagedRuntime<R, ER>
     readonly children?: React.ReactNode
@@ -27,3 +28,41 @@ export const SyncProvider = <R, ER>(
     children: props.children,
 })
 SyncProvider.displayName = "ReactManagedRuntimeSyncProvider"
+
+
+export interface AsyncProviderProps<R, ER> extends React.SuspenseProps {
+    readonly runtime: ReactManagedRuntime<R, ER>
+    readonly children?: React.ReactNode
+}
+
+export const AsyncProvider = <R, ER>(
+    { runtime, children, ...suspenseProps }: AsyncProviderProps<R, ER>
+): React.ReactNode => {
+    const promise = React.useMemo(() => Effect.runPromise(runtime.runtime.runtimeEffect), [runtime])
+
+    return React.createElement(
+        React.Suspense,
+        suspenseProps,
+        React.createElement(AsyncProviderInner<R, ER>, { runtime, promise, children }),
+    )
+}
+AsyncProvider.displayName = "AsyncProvider"
+
+interface AsyncProviderInnerProps<R, ER> {
+    readonly runtime: ReactManagedRuntime<R, ER>
+    readonly promise: Promise<Runtime.Runtime<R>>
+    readonly children?: React.ReactNode
+}
+
+const AsyncProviderInner = <R, ER>(
+    { runtime, promise, children }: AsyncProviderInnerProps<R, ER>
+): React.ReactNode => {
+    const value = React.use(promise)
+
+    return React.createElement(
+        runtime.context,
+        { value },
+        children,
+    )
+}
+AsyncProviderInner.displayName = "AsyncProviderInner"
diff --git a/packages/example/src/routes/effect-component-tests.tsx b/packages/example/src/routes/effect-component-tests.tsx
index 3dadb32..055ff33 100644
--- a/packages/example/src/routes/effect-component-tests.tsx
+++ b/packages/example/src/routes/effect-component-tests.tsx
@@ -18,9 +18,9 @@ export const Route = createFileRoute("/effect-component-tests")({
 
 function RouteComponent() {
     return (
-        <ReactManagedRuntime.SyncProvider runtime={runtime}>
+        <ReactManagedRuntime.AsyncProvider runtime={runtime}>
             <MyRoute />
-        </ReactManagedRuntime.SyncProvider>
+        </ReactManagedRuntime.AsyncProvider>
     )
 }