createLoadingBoundary

Lower-level primitive that backs the <Loading> flow control. Catches pending async reads inside fn and renders fallback until they settle.

App code should use <Loading fallback={...}> instead — reach for this only when authoring custom boundary components.

Import

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

Type signature

function createLoadingBoundary(
  fn: () => any,
  fallback: () => any,
  options?: { on?: () => any }
);

Parameters

fn

The tracked subtree

fallback

The fallback shown while async reads in fn are unresolved

options

on — accessor whose value scopes the boundary; when set, transitions caused by writes to other reactive sources are not caught

Examples

// Custom boundary component built on top of the primitive.
function MyLoading(props: { fallback: JSX.Element; children: JSX.Element }) {
  return createLoadingBoundary(
    () => props.children,
    () => props.fallback
  ) as unknown as JSX.Element;
}