From a9c0590b7c861cef49c7e33afdbcbc4a1e29def6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 10 Mar 2026 02:22:17 +0100
Subject: [PATCH] Fix Async example

---
 packages/example/src/routes/async.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/example/src/routes/async.tsx b/packages/example/src/routes/async.tsx
index a443dab..62e0234 100644
--- a/packages/example/src/routes/async.tsx
+++ b/packages/example/src/routes/async.tsx
@@ -1,5 +1,5 @@
 import { HttpClient } from "@effect/platform"
-import { Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
+import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Array, Effect, flow, Option, Schema } from "effect"
 import { Async, Component, Memoized } from "effect-fc"
@@ -34,24 +34,31 @@ class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(
     )
 }).pipe(
     Async.async,
-    Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
+    Async.withOptions({ defaultFallback: <Text>Default fallback</Text> }),
     Memoized.memoized,
 ) {}
 
 
 const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
+    const [text, setText] = React.useState("Typing here should not trigger a refetch of the post")
     const [id, setId] = React.useState(1)
+
     const AsyncFetchPost = yield* AsyncFetchPostView.use
 
     return (
         <Container>
-            <Flex direction="column" align="center" gap="2">
+            <Flex direction="column" align="stretch" gap="2">
+                <TextField.Root
+                    value={text}
+                    onChange={e => setText(e.currentTarget.value)}
+                />
+
                 <Slider
                     value={[id]}
                     onValueChange={flow(Array.head, Option.getOrThrow, setId)}
                 />
 
-                <AsyncFetchPost id={id} />
+                <AsyncFetchPost id={id} fallback={<Text>Loading post...</Text>} />
             </Flex>
         </Container>
     )