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 {}>(

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)