From 1f478876435fffdc3242c620caa6735d139dae6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 3 Mar 2026 13:47:48 +0100
Subject: [PATCH] Fix

---
 packages/effect-fc/src/Async.ts       |  6 ++----
 packages/example/src/routes/async.tsx | 14 +++++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/effect-fc/src/Async.ts b/packages/effect-fc/src/Async.ts
index d8e55b6..e69f570 100644
--- a/packages/effect-fc/src/Async.ts
+++ b/packages/effect-fc/src/Async.ts
@@ -12,8 +12,6 @@ export interface AsyncPrototype {
     readonly [AsyncTypeId]: AsyncTypeId
 }
 
-const PromiseTypeId: unique symbol = Symbol.for("@effect-fc/Async/Promise")
-
 export const AsyncPrototype: AsyncPrototype = Object.freeze({
     [AsyncTypeId]: AsyncTypeId,
 
@@ -21,7 +19,7 @@ export const AsyncPrototype: AsyncPrototype = Object.freeze({
         this: Component.Component<P, A, E, R> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
-        const Inner = (props: { readonly [PromiseTypeId]: Promise<React.ReactNode> }) => React.use(props[PromiseTypeId])
+        const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
         Inner.displayName = `${ this.displayName }Inner`
 
         return (props: P) => {
@@ -32,7 +30,7 @@ export const AsyncPrototype: AsyncPrototype = Object.freeze({
                 )
             )
 
-            return React.createElement(Inner, { ...props, [PromiseTypeId]: promise })
+            return React.createElement(Inner, { promise })
         }
     },
 } as const)
diff --git a/packages/example/src/routes/async.tsx b/packages/example/src/routes/async.tsx
index d2c9d25..602881d 100644
--- a/packages/example/src/routes/async.tsx
+++ b/packages/example/src/routes/async.tsx
@@ -26,10 +26,12 @@ class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(
         Effect.andThen(Schema.decodeUnknown(Post)),
     ), [props.id])
 
-    return <div>
-        <Heading>{post.title}</Heading>
-        <Text>{post.body}</Text>
-    </div>
+    return (
+        <div>
+            <Heading>{post.title}</Heading>
+            <Text>{post.body}</Text>
+        </div>
+    )
 }).pipe(
     Async.async,
     Memoized.memoized,
@@ -48,7 +50,9 @@ const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
                     onValueChange={flow(Array.head, Option.getOrThrow, setId)}
                 />
 
-                <AsyncFetchPost id={id} />
+                <React.Suspense fallback={<Text>Loading...</Text>}>
+                    <AsyncFetchPost id={id} />
+                </React.Suspense>
             </Flex>
         </Container>
     )