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 = , P extends {}>(
Object.getPrototypeOf(self),
)
+export const suspenseWithOptions: {
+ , P extends {}>(
+ suspenseOptions: Partial
+ ): (
+ self: ExcludeKeys & Component>
+ ) => T & Suspense
+ , P extends {}>(
+ self: ExcludeKeys & Component>,
+ suspenseOptions: Partial,
+ ): T & Suspense
+} = Function.dual(2, , P extends {}>(
+ self: ExcludeKeys & Component>,
+ suspenseOptions: Partial,
+): T & Suspense => Object.setPrototypeOf(
+ { ...self, suspense: true, suspenseOptions },
+ Object.getPrototypeOf(self),
+))
+
export const useFC: {
(
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)}
/>
-
+ Loading memoized...
} />
)
@@ -61,7 +61,7 @@ const AsyncComponent = Component.make(function* AsyncComponent() {
)
}).pipe(
- Component.suspense
+ Component.suspenseWithOptions({ defaultFallback: Loading...
})
)
const MemoizedAsyncComponent = Component.memo(AsyncComponent)