Transitions

Keep input fast while slow work catches up.

Some updates are urgent, such as the text in an input, and some can wait, such as filtering a long list. Transitions let the urgent part happen first.

Signy transitions defer work to a later task and batch it. They do not split rendering into slices or interrupt it, as React's concurrent mode does.

createDeferred()

createDeferred(source) returns a getter for a copy of the source that updates after it. With timeoutMs, it waits until the source has been still for that long, like a debounce.

Comparing the source with the deferred copy tells you whether the results are stale, as the busy state above does.

useTransition()

useTransition() returns a pending signal and a start function. Writes inside start() are deferred and batched, and the pending signal is true until they are applied.

const [isPending, start] = useTransition();

start(() => {
  this.tab.value = 'reports';
});

html`<p aria-busy=${() => String(isPending.value)}>...</p>`;

Each call returns its own pending signal. startTransition(fn) is the same without one, and returns a promise for when the work is done.