Form submission status

[binajmen]

Hi :)

I'm very new to Svelte and SvelteKit (coming from React and Remix) and I love it ❤️

I was trying to retrieve the form submission status, so I can show some spinner and/or disable the submit button. I ended up with:

<script lang="ts">
  ...
  let isSubmitting = false;
</script>

<h1 class="mb-4">Basic information</h1>

<!-- <form method="post" use:enhance> -->
<form
  method="post"
  use:enhance={() => {
    isSubmitting = true;
    return async () => {
      isSubmitting = false;
    };
  }}
>
...

But I read on https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance that:

Without an argument, use:enhance will emulate the browser-native behaviour, just without the full-page reloads. It will:

• update the form property and invalidate all data on a successful response
• update the form property on a invalid response
• update $page.status on a successful or invalid response
• call goto on a redirect response
• render the nearest +error boundary if an error occurs

With my current code, I understand I loose all these nice features because I specify an argument.. Which is unfortunate.

Is there a way to implement an additional use:action to derive the form submission status, so I can keep the best of the default use:enhance behaviour?

[teemingc]

Hey binajmen,

You'll just need to call applyAction(result) to have those same behaviours.

<script>
+  import { enhance, applyAction } from '$app/forms';

  let isSubmitting = false;
</script>

<form
  method="POST"
  use:enhance={() => {
    isSubmitting = true;
+   return async ({ result }) => {
+     await applyAction(result);
      isSubmitting = false;
    };
  }}
>

https://kit.svelte.dev/docs/form-actions#progressive-enhancement-applyaction

[binajmen]

Wow, I must be blind, thanks for pointing out the obvious!

[repsac-by]

Another way

<script lang="ts">
  ...
-  let isSubmitting = false;
+  $: isSubmitting = (void form, false);
</script>

<h1 class="mb-4">Basic information</h1>

<!-- <form method="post" use:enhance> -->
<form
  method="post"
  use:enhance={() => {
    isSubmitting = true;
-    return async () => {
-      isSubmitting = false;
-    };
  }}
>
...

[binajmen]

I must say I was intrigued by your suggestion, but TS is complaining about not finding form. And I'm not sure I'll understand what I am doing if I go back to this code in two weeks 😄

[binajmen]

Ok I got it: export let form: ActionData;. But I think the previous answer is (1) more (re-)readable and (2) allows to reuse the default actions from use:enhance. Thanks anyway 🙏