packages/effect-fc/src/Component.ts

@@ -91,27 +91,37 @@ export const useFC: {
 export const useSuspenseFC: {
     <E, R, P extends {}>(
         self: Component<E, R, P>
-    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
+    ): Effect.Effect<
+        React.FC<P & { readonly suspenseProps: React.SuspenseProps }>,
+        never,
+        Exclude<R, Scope.Scope>
+    >
 } = Effect.fn("useSuspenseFC")(function* <E, R, P extends {}>(
     self: Component<E, R, P>
 ) {
     const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
     runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 
-    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.ReactNode> }) => React.use(props.promise)
+            const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => 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: {