Added timers test

Author: ciscoheat

src/routes/Navigation.svelte

@@ -4,6 +4,7 @@
   <a href="/crud">CRUD</a> |
   <a href="/super-debug">SuperDebug</a> |
   <a href="/nested">Nested</a> |
+  <a href="/timers">Timers</a> |
   <a href="/multiple">Multiple</a>
   <br />
   <a href="/multiple2">Multiple 2</a> |

src/routes/tests/_empty/+page.server.ts

@@ -1,12 +1,11 @@
-import type { Actions, PageServerLoad } from './$types';
 import { message, superValidate } from '$lib/server';
 import { schema } from './schema';
 import { fail } from '@sveltejs/kit';
 
-export const load = (async () => {
+export const load = async () => {
   const form = await superValidate(schema);
   return { form };
-}) satisfies PageServerLoad;
+};
 
 export const actions = {
   default: async ({ request }) => {
@@ -20,4 +19,4 @@ export const actions = {
 
     return message(form, 'Posted OK!');
   }
-} satisfies Actions;
+};

src/routes/timers/+page.server.ts

@@ -0,0 +1,19 @@
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+export const actions = {
+  default: async ({ request }) => {
+    await new Promise((r) => setTimeout(r, 12000));
+    const form = await superValidate(request, schema);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Posted OK!');
+  }
+};

src/routes/timers/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+
+  const {
+    form,
+    errors,
+    tainted,
+    message,
+    enhance,
+    submitting,
+    delayed,
+    timeout
+  } = superForm(data.form, {
+    delayMs: 4000,
+    timeoutMs: 8000
+  });
+</script>
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+  <label>
+    Name: <input name="name" bind:value={$form.name} />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+  <div>
+    <button>Submit</button>
+    <div>
+      {#if $timeout}
+        STATE-TIMEOUT
+      {:else if $delayed}
+        STATE-DELAYED
+      {:else if $submitting}
+        STATE-SUBMITTING
+      {/if}
+    </div>
+  </div>
+</form>
+
+<style lang="scss">
+  form {
+    margin: 2rem 0;
+
+    input {
+      background-color: #dedede;
+    }
+
+    .invalid {
+      color: crimson;
+    }
+  }
+</style>

src/routes/timers/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(1).default('Name')
+});