diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts index 2b0c5f6..398e9f3 100644 --- a/packages/effect-fc/src/Component.ts +++ b/packages/effect-fc/src/Component.ts @@ -91,27 +91,37 @@ export const useFC: { export const useSuspenseFC: { ( self: Component - ): Effect.Effect, never, Exclude> + ): Effect.Effect< + React.FC

, + never, + Exclude + > } = Effect.fn("useSuspenseFC")(function* ( self: Component ) { const runtimeRef = React.useRef>>(null!) runtimeRef.current = yield* Effect.runtime>() - return React.useMemo(() => function ScopeProvider(props: P) { - const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope([], self.options)) + return React.useCallback(function ScopeProvider(props: P & { readonly suspenseProps: React.SuspenseProps }) { + const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope( + Array.from( + Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values() + ), + self.options, + )) const FC = React.useMemo(() => { - const inner = (props: { readonly promise: Promise }) => React.use(props.promise) + const SuspenseInner = (props: { readonly promise: Promise }) => React.use(props.promise) - const f = (props: P) => { + const f = ({ suspenseProps, ...props }: P & { readonly suspenseProps: React.SuspenseProps }) => { const promise = Runtime.runPromise(runtimeRef.current)( Effect.provideService(self(props), Scope.Scope, scope) ) + return React.createElement( React.Suspense, - { fallback: "Loading..." }, - React.createElement(inner, { promise }), + suspenseProps, + React.createElement(SuspenseInner, { promise }), ) } f.displayName = self.displayName ?? "Anonymous" @@ -119,9 +129,7 @@ export const useSuspenseFC: { }, [scope]) return React.createElement(FC, props) - }, Array.from( - Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values() - )) + }, []) }) export const use: {