Deferred Data

Deferred loading allows you to return promises from your loader. Fast data renders immediately while slower data streams in using Suspense and Await.

Instant

This data loaded instantly!

1 Second Delay

Loaded after 1 second

2.5 Second Delay

Loaded after 2.5 seconds

Example Code

import { delay } from "@std/async/delay";
import type { RouteLoaderArgs } from "@udibo/juniper";

export function loader(args: RouteLoaderArgs) {
  return {
    fastData: "Instant!",
    slowData: delay(1000).then(() => "Delayed")
  };
}

// In component:
<Suspense fallback={<Loading />}>
  <Await resolve={loaderData.slowData}>
    {(data) => <div>{data}</div>}
  </Await>
</Suspense>