Dan Train

@dantrain.com

21 Followers 37 Following

// Code block with the following code: export const Route = createFileRoute("/")({ component: Home, loader: async () => ({ countPromise: defer(getCount()) }), }); function Home() { const { countPromise } = Route.useLoaderData(); return ( <p> Count:{" "} <Await promise={countPromise} fallback={"(Loading...)"}> {(count) => <span>{count}</span>} </Await> </p> ); }
// Code block with the following code: export const Route = createFileRoute("/")({ component: Home, loader: async () => ({ countPromise: getCount() }), }); function Home() { const { countPromise } = Route.useLoaderData(); return ( <p> Count:{" "} <Suspense fallback={"(Loading...)"}> <Count countPromise={countPromise} /> </Suspense> </p> ); } function Count({ countPromise }: { countPromise: Promise<number> }) { const count = use(countPromise); return <span>{count}</span>; }