Svelte form loading

+page.svelte

<Form action="?/deleteTodo" let:submitting>
      <input type="hidden" name="todoId" value={todo.id} />
      <button type="submit" disabled={submitting}>Delete</button>
</Form>

Form.svelte

<script lang="ts">
	import { applyAction, enhance } from '$app/forms';

	export let action: string;
	export let className = '';

	let submitting = false;
</script>

<form
	method="POST"
	{action}
	class={className}
	use:enhance={() => {
		submitting = true;

		return async ({ update, result }) => {
			await update();
			await applyAction(result);
			submitting = false;
		};
	}}
>
	<slot {submitting} />
</form>

@joetifa2003 FYI, applyAction() isn't necessary if you call update(). applyAction() is only needed if you want to handle the result differently depending on what the result is. update() runs the same thing as if you didn't pass anything to use:enhance.