The timers didn't reset after navigation in certain cases.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- The timers didn't reset after navigation in certain cases.
+
 ## [1.13.1] - 2023-12-22
 
 ### Fixed

package.json

@@ -93,6 +93,7 @@
     "@sveltejs/kit": "^1.30.3",
     "@sveltejs/package": "^2.2.4",
     "@types/throttle-debounce": "^5.0.2",
+    "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "devalue": "^4.3.2",
@@ -112,6 +113,7 @@
     "throttle-debounce": "^5.0.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
+    "uuid": "^9.0.1",
     "vite": "^4.5.1",
     "vitest": "^0.33.0",
     "zod": "^3.22.4"

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import { enhance, applyAction } from '$app/forms';
 import { invalidateAll } from '$app/navigation';
-import { page } from '$app/stores';
+import { navigating, page } from '$app/stores';
 import type { ActionResult } from '@sveltejs/kit';
 import { get, type Readable, type Writable } from 'svelte/store';
 import { browser } from '$app/environment';
@@ -548,19 +548,26 @@ export function formEnhance<T extends AnyZodObject, M>(
       // Also fixing an edge case when timers weren't resetted when redirecting to the same route.
       if (cancelled || result.type != 'redirect') {
         htmlForm.completed(cancelled);
-      } else if (
-        result.type == 'redirect' &&
-        new URL(
-          result.location,
-          /^https?:\/\//.test(result.location)
-            ? undefined
-            : document.location.origin
-        ).pathname == document.location.pathname
-      ) {
-        // Checks if beforeNavigate have been called in client/form.ts.
-        setTimeout(() => {
-          htmlForm.completed(true, true);
-        }, 0);
+      } else if (result.type == 'redirect') {
+        if (
+          new URL(
+            result.location,
+            /^https?:\/\//.test(result.location)
+              ? undefined
+              : document.location.origin
+          ).pathname == document.location.pathname
+        ) {
+          // Checks if beforeNavigate have been called in client/form.ts.
+          setTimeout(() => {
+            htmlForm.completed(true, true);
+          }, 0);
+        } else {
+          const unsub = navigating.subscribe(($nav) => {
+            if ($nav) return;
+            unsub();
+            htmlForm.completed(cancelled);
+          });
+        }
       }
     }
 

src/lib/client/formEnhance.ts

@@ -0,0 +1,28 @@
+<script>
+	import './styles.css';
+</script>
+
+<div class="app">
+	<main>
+		<slot />
+	</main>
+</div>
+
+<style>
+	.app {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		width: 100%;
+		max-width: 64rem;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>

src/routes/tests/redirect-submitting/+layout.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { v4 } from 'uuid';
+</script>
+
+<svelte:head>
+  <title>Home</title>
+  <meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+  <h1>Superforms debug app</h1>
+  <p>
+    Description: the submitting store will be stuck as true forever in
+    certaint cases
+  </p>
+  <p>Repro steps:</p>
+  <ol>
+    <li>Load this page "fresh" in a browser session</li>
+    <li>
+      <a href={`/tests/redirect-submitting/${v4()}`}>Open form page</a> (client
+      side navigation)
+    </li>
+    <li>Submit form</li>
+    <li>
+      The submit will return a 303 to a different url with the same form.
+      This form is "stuck" with $submtting = true forever
+    </li>
+  </ol>
+  <p>
+    The issue does not occur if you open the form page directly, omitting the
+    client side navigation
+  </p>
+</section>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 0.6;
+  }
+
+  h1 {
+    width: 100%;
+  }
+</style>

src/routes/tests/redirect-submitting/+page.svelte

@@ -0,0 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

src/routes/tests/redirect-submitting/+page.ts

@@ -0,0 +1,31 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { superValidate } from '$lib/server';
+import { z } from 'zod';
+import { v4 } from 'uuid';
+
+const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+const schema = z.object({
+  name: z.string().default('Hello world!')
+});
+
+export const actions = {
+  default: async ({ request }) => {
+    await sleep(1000);
+    const form = await superValidate(request, schema);
+    console.log('POST', form);
+
+    // Convenient validation check:
+    if (!form.valid) {
+      // Again, return { form } and things will just work.
+      return fail(400, { form });
+    }
+
+    // TODO: Do something with the validated form.data
+
+    // Yep, return { form } here too
+    // return { form }
+    throw redirect(303, `/tests/redirect-submitting/${v4()}`);
+  }
+};

src/routes/tests/redirect-submitting/[uuid]/+page.server.ts

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  import { superForm } from '$lib/client';
+
+  export let data: PageData;
+
+  // Client API:
+  const { enhance, form, submitting } = superForm(data.form);
+
+  $: console.log('submitting', $submitting);
+</script>
+
+<a href="/tests/redirect-submitting">Back</a>
+<form use:enhance method="POST">
+  <label for="name">Name</label>
+  <input type="text" name="name" bind:value={$form.name} />
+
+  <div><button disabled={$submitting}>Submit</button></div>
+</form>

src/routes/tests/redirect-submitting/[uuid]/+page.svelte

@@ -0,0 +1,26 @@
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="text-column">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<pre>npm create svelte@latest</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+	<p>
+		The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
+		using it with JavaScript disabled!
+	</p>
+</div>