Timers

As said in the previous section, the user should understand that things are happening when they submit the form. Timers gives us a way of providing feedback at the right time, based upon human perception research.

Usage

const { form, enhance, submitting, delayed, timeout } = superForm(data.form, {
  delayMs: number = 500
  timeoutMs: number = 8000
})

Submit state

The delayMs and timeoutMs decides how long before the submission changes state. The states are:

Idle → submitting → delayed → timeout
       0 ms         500 ms    8000 ms

These states affect the readable stores submitting, delayed and timeout returned from superForm. They are not mutually exclusive, so submitting won’t change to false when delayed becomes true.

Loading indicators

A perfect use for these timers is to show a loading indicator while the form is submitting:

src/routes/+page.svelte

<script lang="ts">
  const { form, errors, enhance, delayed } = superForm(data.form);
</script>

<div>
  <button>Submit</button>
  {#if $delayed}<span class="delayed">Working...</span>{/if}
</div>

The reason for using delayed instead of submitting is based on the article Response Times: The 3 Important Limits, which states that for short waiting periods, no feedback is required except to display the result. Therefore, delayed is used to show a loading indicator after a little while.

Visualizing the timers

Try submitting this form and see how different delay times affect the timers. Loading spinners are set to display when delayed and timeout are true. The request itself is set to timeout with an error after 10 seconds.

Click multiple times to see the effect of multipleSubmits = 'prevent' as well.

Idle → submitting → delayed → timeout
       0 ms         500 ms    8000 ms

Experimenting with these three timers and the delay between them, it’s certainly possible to prevent the feeling of unresponsiveness in many cases. Please share your results on Discord or Github, if you do!