Components

• <Defer>: defers content into a placeholder. It renders its own placeholder, so it is self-sufficient
• <Slot>: a named placeholder, filled by a <Defer> that renders elsewhere in the tree

<Defer>#

Registers its children as deferred content and renders a placeholder in its place, showing fallback (empty when omitted) until the content is ready. Its id is generated, unless target names a <Slot> (below).

import { Defer } from "@vincle/flow";

<Defer fallback={<p>Loading dashboard…</p>}>
  <HeavyDashboard />
</Defer>;

Pass a factory to receive an AbortSignal. It fires when the client disconnects or the fragment's timeout elapses; forward it to your own cancelable work (e.g. fetch(url, { signal })) so that work stops early:

<Defer fallback={<p>Loading dashboard…</p>}>{(signal) => <HeavyDashboard signal={signal} />}</Defer>

The signal does not cut the render short: if it has fired by the time the render finishes, the result is discarded and routed to onError instead of being emitted.

Merge types#

merge controls how the content applies to the target element:

"morph" keeps focus, scroll position and form state. Not every adapter supports every merge type: an unsupported one is rejected at registration with a clear error.

<Slot>: named insertion point#

A named placeholder for content deferred elsewhere in the tree: typically a layout reserving a spot, filled by a page component that cannot reach into that layout. Its children render immediately as placeholder content, until the matching <Defer> replaces them. name is required.

When placeholder and content live in the same spot, skip Slot: Defer with its own fallback does the job.

The <Slot> is the placeholder: its <Defer> emits none of its own, wherever the two sit in the page.

import { Defer, Slot } from "@vincle/flow";
import { Results } from "./results";

function SearchPage() {
  return (
    <>
      <main>
        <h1>Search results</h1>
        <Slot name="results">
          <p>Loading results…</p>
        </Slot>
      </main>
      <Defer target="results">
        <Results />
      </Defer>
    </>
  );
}

Content types#

Defer children (the DeferContent type) are a value, or a factory receiving the AbortSignal and returning one:

The runtime consumes an AsyncIterable itself: no .then() or for await on your side. See Streaming.

Props#