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)