From b5f081044ec473556ea8e8ba25faf4a494392fd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Mon, 21 Jul 2025 11:35:02 +0200
Subject: [PATCH] Add suspenseWithOptions

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

diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts
index 5a7f6cb..280cad0 100644
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -386,6 +386,24 @@ export const suspense = <T extends Component<any, any, P>, P extends {}>(
     Object.getPrototypeOf(self),
 )
 
+export const suspenseWithOptions: {
+    <T extends Component<any, any, P>, P extends {}>(
+        suspenseOptions: Partial<Suspense.Options>
+    ): (
+        self: ExcludeKeys<T, keyof Suspense> & Component<any, any, ExcludeKeys<P, keyof Suspense.Props>>
+    ) => T & Suspense
+    <T extends Component<any, any, P>, P extends {}>(
+        self: ExcludeKeys<T, keyof Suspense> & Component<any, any, ExcludeKeys<P, keyof Suspense.Props>>,
+        suspenseOptions: Partial<Suspense.Options>,
+    ): T & Suspense
+} = Function.dual(2, <T extends Component<any, any, P>, P extends {}>(
+    self: ExcludeKeys<T, keyof Suspense> & Component<any, any, ExcludeKeys<P, keyof Suspense.Props>>,
+    suspenseOptions: Partial<Suspense.Options>,
+): T & Suspense => Object.setPrototypeOf(
+    { ...self, suspense: true, suspenseOptions },
+    Object.getPrototypeOf(self),
+))
+
 
 export const useFC: {
     <E, R, P extends {}>(
diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx
index 7b123c9..4e6c957 100644
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -20,7 +20,7 @@ const RouteComponent = Component.make(function* AsyncRendering() {
                 onChange={e => setInput(e.target.value)}
             />
 
-            <VMemoizedAsyncComponent />
+            <VMemoizedAsyncComponent fallback={<p>Loading memoized...</p>} />
             <VAsyncComponent />
         </Flex>
     )
@@ -61,7 +61,7 @@ const AsyncComponent = Component.make(function* AsyncComponent() {
         </Flex>
     )
 }).pipe(
-    Component.suspense
+    Component.suspenseWithOptions({ defaultFallback: <p>Loading...</p> })
 )
 const MemoizedAsyncComponent = Component.memo(AsyncComponent)