From 40eb25d2c328de343ad923def73b2833e3877051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Mon, 14 Jul 2025 06:52:38 +0200
Subject: [PATCH] Work

---
 packages/effect-fc/src/Component.ts                 | 5 +++++
 packages/example/src/routes/dev/async-rendering.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts
index 808dd19..1f61bf3 100644
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -110,6 +110,8 @@ export interface Suspense {
     readonly suspense: true
 }
 
+export type SuspenseProps = Omit<React.SuspenseProps, "children">
+
 export const suspense = <T extends Component<any, any, any>>(
     self: ExcludeKeys<T, keyof Suspense>
 ): T & Suspense => Object.setPrototypeOf(
@@ -119,6 +121,9 @@ export const suspense = <T extends Component<any, any, any>>(
 
 
 export const useFC: {
+    <E, R, P extends {}>(
+        self: Component<E, R, ExcludeKeys<P, keyof SuspenseProps>> & Suspense
+    ): Effect.Effect<React.FC<P & SuspenseProps>, never, Exclude<R, Scope.Scope>>
     <E, R, P extends {}>(
         self: Component<E, R, P>
     ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx
index 2832679..0b2e479 100644
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -8,7 +8,7 @@ import * as React from "react"
 
 
 const RouteComponent = Component.make(function* AsyncRendering() {
-    const VAsyncComponent = yield* Component.useSuspenseFC(AsyncComponent)
+    const VAsyncComponent = yield* Component.useFC(AsyncComponent)
     const [input, setInput] = React.useState("")
 
     return <>
@@ -34,7 +34,9 @@ const AsyncComponent = Component.make(function* AsyncComponent() {
         <Text>Rendered!</Text><br />
         <VSubComponent />
     </>
-})
+}).pipe(
+    Component.suspense
+)
 
 const SubComponent = Component.make(function* SubComponent() {
     const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))