Sprites.Ui.Loading

A loading boundary. It shows a spinner over its content while any value read inside it is pending, and hides the content behind the spinner without removing it, so the content keeps running.

Sprites.Ui.Loading

Sprites.Ui.Loading Element

Sprites.Ui.Loading(build)

Wrap a piece of interface. It shows a spinner over the content while any value read inside it is pending, and hides the content behind the spinner without removing it, so the content keeps running and reappears the moment its values arrive.

InputTypeDescription
buildFunctionBuilds the content shown inside the boundary.

Returns the boundary element.

const started = Sprites.Reactive.Value(false);
const result = Sprites.Reactive.Pending(0);
Sprites.Ui.Button.SetValue(started, true, 'Load in 2s');
Sprites.Ui.Loading(() => {
  Sprites.Ui.Dom.Text(' result = ', result);
});
Sprites.Reactive.If(started, () => {
  Sprites.Animate.SetAfter(result, 42, 2000);
});
The spinner covers the content while result is pending, then clears.