Loading

Renders a fallback while pending async reads inside the subtree settle.

Any computation (createMemo, createSignal(fn), createStore(fn), lazy(...), etc.) that throws because data isn't ready is caught by the nearest enclosing <Loading>. The boundary swaps to its fallback until every pending read has resolved, then renders the children.

The optional on prop scopes the boundary so it ignores transitions caused by writes to other reactive sources — those transitions stay on the previous content (with isPending() flipping during the transition).

Scope <Loading> around the data-dependent slot, not the surrounding shell. Wrapping layout chrome (header, nav, footer) in the same boundary as the data means revalidation replaces the entire screen with the fallback; rendering chrome outside the boundary keeps it stable while only the affordance flips.

Import

import { Loading } from "solid-js";

Type signature

function Loading(props: {
  fallback?: SolidElement;
  on?: any;
  children: SolidElement;
}): SolidElement;

Examples

const Profile = lazy(() => import("./Profile"));

<Loading fallback={<Spinner />}>
  <Profile />
</Loading>;

// Only show the fallback for transitions caused by writes to `route`.
<Loading fallback={<Skeleton />} on={route}>
  <Page />
</Loading>