Loading

A value that hasn't arrived yet is locked. That lock rides through any calculation and up to the nearest Loading boundary, which shows a spinner and clears on its own when the value lands. The program stays declarative throughout; see Asynchronous.

Live

The name loads after a moment. Press Reload to see it again.

The code

const loaded = Reactive.State(false);

// `name` is locked — not ready — until `loaded` becomes true
const name = Reactive.Lock("Ada Lovelace", !Reactive.Value(loaded));

Reactive.Loading.Container(() => {
  Content.Text("Name: ");
  Content.Text(name);        // emitting a locked value locks this region
});

// somewhere else, whenever the data arrives:
//   Reactive.Set(loaded, true)   → the spinner clears on its own

The code emits the value directly; being not-ready is carried by the value itself, and Loading.Container catches it. A failed value carries an error and a retry the same way, and the boundary shows the message and a Retry button.

← Temperature Back to examples