Skip to content

pending_count increments too late when using async preflight validation #15193

@MartkCz

Description

@MartkCz

Describe the bug

Hi!

I’m using SvelteKit remote functions + form.preflight(...) with an async schema validation.

Example (pseudo-code):

<script>
	const preflightSchema = v.objectAsync({
		name: v.pipeAsync(
			v.string(),
			v.checkAsync(async () => {
				await wait(1500);
				return true;
			}, 'Error')
		),
	});
</script>

{createProfile.pending}
<form {...createProfile.preflight(preflightSchema)}></form>

Problem

In this scenario, pending_count (and therefore createProfile.pending) is incremented only after the preflight async validation finishes, i.e. ~1.5s later.

This happens because pending_count is currently incremented only when the request is actually sent to the backend:
https://github.com/sveltejs/kit/blob/main/packages/kit/src/runtime/client/remote-functions/form.svelte.js#L166-L178

However, from a UX perspective, the form submission is already “in progress” once the user submits the form and preflight begins.

Expected behavior

pending_count should increment immediately when the submission starts (before / during preflight validation) and decrement again if preflight fails (or after completion).

In other words, it feels like pending_count should be managed around the preflight execution here:
https://github.com/sveltejs/kit/blob/main/packages/kit/src/runtime/client/remote-functions/form.svelte.js#L113-L159

Why it matters

Because of the current behavior, I can’t reliably:

  • show feedback like “Submitting…” immediately after the user clicks submit
  • disable the submit button at the right time
  • prevent double-submit during long async preflight validation

Proposal

Move pending_count++ to the start of the submit handling, before preflight runs, and ensure it is decremented if preflight validation rejects / fails.

If this makes sense, I can open a PR with a fix.

Thanks!

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-y9qbb3qq?file=src%2Froutes%2F%2Blayout.svelte

  1. Click on "submit"
  2. Wait 1.5s

Logs

System Info

Irrelevant

Severity

annoyance

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    formsStuff relating to forms and form actions

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions