Loading states

The 3 hooks used for navigating; useLink, useForm, and useNavigate all have the same signature.

[Link, busy, loading, navigations] = useLink();
[Form, busy, loading, navigations] = useForm();
[navigate, busy, loading, navigations] = useNavigate();

The busy and loading variables in each of these serve as loading state indicators.

Busy

Busy is a boolean indicating whether at least 1 navigation is currently happening.

A common use case is to disable form controls preventing another navigation while a form navigation is already busy.

function CreateTodo() {
	let [Form, busy, loading, navigations] = useForm();

	return (
		<Form action="/todos" method="post">
			<fieldset disabled={busy}>
				<input type="text" name="title" />
				<button name="intent" value="create todo">
					Create
				</button>
			</fieldset>
		</Form>
	);
}

Loading

Loading is similar to the busy state, but specifically tailored to conditionally changing the user interface.

It will prevent user interface flicker because:

1. it will wait a very small amount of time before changing from false to true. This allows navigations that take an almost imperceptible amount of time, to not show a loading state at all. The delay can be adjusted with the delayLoadingMs property of the router. However, it has got a very sensible default of 30ms, so you probably should not care too much about changing it.
2. it will wait some amount of time before changing from true to false. This prevents navigations that are already loading to stop showing the loading state too quickly. The delay can be adjusted with the minimumLoadingMs property of the router. However, it has got a very sensible default of 500ms, so you probably should not care too much about changing it.

function CreateTodo() {
	let [Form, busy, loading, navigations] = useForm();

	let loadingElement;
	if (loading) {
		loadingElement = <Spinner />;
	}

	return (
		<>
			{loadingElement}
			<Form action="/todos" method="post">
				<fieldset disabled={busy}>
					<input type="text" name="title" />
					<button name="intent" value="create todo">
						Create
					</button>
				</fieldset>
			</Form>
		</>
	);
}