createRevealOrder

Coordinate the reveal timing of sibling loading boundaries.

Accepts reactive accessors:

• order: "sequential" (default) | "together" | "natural".
  • "sequential" — classic frontier reveal: siblings reveal in registration order as each resolves; later siblings stay hidden until earlier ones complete.
  • "together" — every direct slot stays on its fallback until the whole group is "minimally ready" (each direct slot has produced its own first visible content under its own order), then the whole group releases at once.
  • "natural" — children reveal independently (as each resolves). At the top level this is a no-op compared to not using createRevealOrder; the mode exists for nesting, where the group registers as a single composite slot to any enclosing createRevealOrder.
• collapsed: only meaningful when order === "sequential". When set, tail siblings past the frontier suppress their own fallback output. Ignored under "together" and "natural" — those orders have no frontier.

Nested createRevealOrder groups compose: the inner controller registers as a single slot in the outer controller and is held on its fallbacks until the outer releases that slot. Once released, the inner controller runs its own order locally over anything still pending. There is no opt-out from an outer hold.

"Minimally ready" is what an order considers its first visible content:

• sequential — frontier-0 is minimally ready (leaf: on resolve; nested: via its own minimal signal).
• together — every direct slot is minimally ready.
• natural — any direct slot has visible content (leaves on resolve; nested composites when fully ready, since natural treats composites as atomic).

Import

import { createRevealOrder } from "@solidjs/signals";

Type signature

function createRevealOrder<T>(
  fn: () => T,
  options?: { order?: OrderAccessor; collapsed?: BoolAccessor }
): T;

Examples

// Primitive form of `<Reveal>` — coordinate sibling loading boundaries
// programmatically. App code uses the JSX `<Reveal>` component instead.
// Both options are accessors so they can react to state changes.
createRevealOrder(() => renderSiblings(), {
  order: () => mode(),
  collapsed: () => true,
});