packages/example/src/routes/promise.tsx

@@ -1,8 +1,9 @@
 import { R } from "@/reffuse"
 import { HttpClient } from "@effect/platform"
+import { Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect } from "effect"
-import { use, useMemo } from "react"
+import { Suspense, use, useEffect, useMemo } from "react"
 
 
 export const Route = createFileRoute("/promise")({
@@ -10,19 +11,32 @@ export const Route = createFileRoute("/promise")({
 })
 
 function RouteComponent() {
+    return (
+        <Suspense fallback={<Text>Loading...</Text>}>
+            <AsyncComponent />
+        </Suspense>
+    )
+}
 
-    const runPromise = R.useRunPromise()
+function AsyncComponent() {
 
-    const promise = useMemo(() => HttpClient.HttpClient.pipe(
-        Effect.flatMap(client => client.get("https://www.uuidtools.com/api/generate/v4")),
-        HttpClient.withTracerPropagation(false),
-        Effect.flatMap(res => res.json),
-        Effect.tap(Console.log),
+    // const runPromise = R.useRunPromise()
 
-        Effect.scoped,
-        runPromise,
-    ), [runPromise])
+    // const promise = useMemo(() => HttpClient.HttpClient.pipe(
+    //     Effect.flatMap(client => client.get("https://www.uuidtools.com/api/generate/v4")),
+    //     HttpClient.withTracerPropagation(false),
+    //     Effect.flatMap(res => res.json),
+    //     Effect.tap(Console.log),
 
+    //     Effect.scoped,
+    //     runPromise,
+    // ), [runPromise])
+
+    const promise = useMemo(() => new Promise<string>((resolve => {
+        setTimeout(() => { resolve("prout") }, 500)
+    })), [])
+
+    console.log("React.use invoked with:", promise);
     const value = use(promise)