32 lines
836 B
TypeScript
32 lines
836 B
TypeScript
import { R } from "@/reffuse"
|
|
import { Button, Text } from "@radix-ui/themes"
|
|
import { createFileRoute } from "@tanstack/react-router"
|
|
import * as LazyRef from "@typed/lazy-ref"
|
|
import { Suspense, use } from "react"
|
|
|
|
|
|
export const Route = createFileRoute("/lazyref")({
|
|
component: RouteComponent
|
|
})
|
|
|
|
function RouteComponent() {
|
|
const promise = R.usePromise(() => LazyRef.of(0), [])
|
|
|
|
return (
|
|
<Suspense fallback={<Text>Loading...</Text>}>
|
|
<LazyRefComponent promise={promise} />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
function LazyRefComponent({ promise }: { readonly promise: Promise<LazyRef.LazyRef<number>> }) {
|
|
const ref = use(promise)
|
|
const [value, setValue] = R.useLazyRefState(ref)
|
|
|
|
return (
|
|
<Button onClick={() => setValue(prev => prev + 1)}>
|
|
{value}
|
|
</Button>
|
|
)
|
|
}
|