Status lines

A line beside a form's button that says what its save is doing: saving, saved, or why it was refused. It stays where the person looks; a message that comes and goes over the page is a toast.

Examples

An element form-status beside the button, and REDZ.ui.status(line, promise) as the save starts. Past 400 ms the line says "Saving…" with a spinner; when the promise is kept it says "Saved" with a check and fades after three seconds; when it is refused it says the refusal's own message with a danger icon, and stays. The words come from the page's texts status.saving and status.saved.

<div class="hstack flex-wrap gap-12">
	<button class="btn btn-primary" type="button" data-docs-run="status-save"><i class="bi bi-floppy" aria-hidden="true"></i>Save</button>
	<button class="btn" type="button" data-docs-run="status-refuse">Save a taken name</button>
	<div class="form-status" id="status-save-line"></div>
</div>

const line = document.getElementById('status-save-line');
REDZ.ui.status(line, fetch('/excursions/12', {method: 'PUT', body}).then((answer) => {
	if (!answer.ok) {
		throw new Error('The name is taken. Pick another.');
	}
}));

Words of the page

REDZ.ui.status(line, {tone, text}) says the page's own words at once with the tone's icon: success and info fade, warning and danger stay. A later call takes the line over from an earlier one, and REDZ.ui.status(line, null) empties the line, for a next step that must not show an old refusal.

<div class="hstack flex-wrap gap-12">
	<button class="btn" type="button" data-docs-run="status-words">Publish</button>
	<div class="form-status" id="status-words-line"></div>
</div>

Accessibility

The line holds a polite status from the page's load, so a screen reader says each message once - "Saving…" only when the save takes longer than 400 ms.
A refusal stays until the next save: its words say what to change, not only that something failed.
The icon carries the tone; the words carry the meaning, in the page's text colors.