From adcaee889fe4271654ed816eadfe33012f310df4 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Thu, 4 Jun 2026 15:43:27 +0200
Subject: [PATCH] fix: redirect /add routes at load phase to eliminate white
 flash

---
 .../(root)/(logged)/apps/add/+page.svelte     | 27 +++-----------
 .../routes/(root)/(logged)/apps/add/+page.ts  | 18 ++++++++++
 .../(root)/(logged)/apps_raw/add/+page.svelte | 27 +++-----------
 .../(root)/(logged)/apps_raw/add/+page.ts     | 18 ++++++++++
 .../(root)/(logged)/flows/add/+page.svelte    | 27 +++-----------
 .../routes/(root)/(logged)/flows/add/+page.ts | 18 ++++++++++
 .../(root)/(logged)/scripts/add/+page.svelte  | 36 ++++---------------
 .../(root)/(logged)/scripts/add/+page.ts      | 27 ++++++++++++++
 8 files changed, 102 insertions(+), 96 deletions(-)
 create mode 100644 frontend/src/routes/(root)/(logged)/apps/add/+page.ts
 create mode 100644 frontend/src/routes/(root)/(logged)/apps_raw/add/+page.ts
 create mode 100644 frontend/src/routes/(root)/(logged)/flows/add/+page.ts
 create mode 100644 frontend/src/routes/(root)/(logged)/scripts/add/+page.ts

diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
index 4c78bb7c06..e54568a9ed 100644
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -1,22 +1,5 @@
-<script lang="ts">
-	// `/apps/add` is a thin redirect onto the canonical editor at
-	// `/apps/edit/u/{user}/draft_{uuid}?new_draft=true`. See /scripts/add
-	// for the design rationale — all editor logic lives in
-	// /apps/edit/[...path]. The `u/{user}/` prefix matches Windmill's
-	// path scheme so the draft slot lives in the authed user's namespace.
-	import { goto } from '$lib/navigation'
-	import { page } from '$app/state'
-	import { userStore } from '$lib/stores'
-	import { get } from 'svelte/store'
-	import { onMount } from 'svelte'
-
-	onMount(() => {
-		const username = get(userStore)?.username ?? 'me'
-		const uuid = crypto.randomUUID()
-		const params = new URLSearchParams(page.url.searchParams)
-		params.set('new_draft', 'true')
-		goto(`/apps/edit/u/${username}/draft_${uuid}?${params.toString()}`, {
-			replaceState: true
-		})
-	})
-</script>
+<!--
+	Never rendered — the sibling +page.ts redirects at the load phase, before
+	this component can mount. Kept as an empty file because SvelteKit only
+	registers a route when a +page.svelte exists.
+-->
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.ts b/frontend/src/routes/(root)/(logged)/apps/add/+page.ts
new file mode 100644
index 0000000000..d311b9ac2f
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.ts
@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit'
+import { base } from '$app/paths'
+import { get } from 'svelte/store'
+import { userStore } from '$lib/stores'
+import type { PageLoad } from './$types'
+
+// See /scripts/add/+page.ts for the rationale — redirect at load time
+// to avoid mounting a blank route component and flashing white.
+
+export const prerender = false
+
+export const load: PageLoad = ({ url }) => {
+	const username = get(userStore)?.username ?? 'me'
+	const uuid = crypto.randomUUID()
+	const params = new URLSearchParams(url.searchParams)
+	params.set('new_draft', 'true')
+	redirect(307, `${base}/apps/edit/u/${username}/draft_${uuid}?${params.toString()}`)
+}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
index 1f2334b8cb..e54568a9ed 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
@@ -1,22 +1,5 @@
-<script lang="ts">
-	// `/apps_raw/add` is a thin redirect onto the canonical editor at
-	// `/apps_raw/edit/u/{user}/draft_{uuid}?new_draft=true`. See
-	// /scripts/add for the design rationale — all editor logic lives in
-	// /apps_raw/edit/[...path]. The `u/{user}/` prefix matches Windmill's
-	// path scheme so the draft slot lives in the authed user's namespace.
-	import { goto } from '$lib/navigation'
-	import { page } from '$app/state'
-	import { userStore } from '$lib/stores'
-	import { get } from 'svelte/store'
-	import { onMount } from 'svelte'
-
-	onMount(() => {
-		const username = get(userStore)?.username ?? 'me'
-		const uuid = crypto.randomUUID()
-		const params = new URLSearchParams(page.url.searchParams)
-		params.set('new_draft', 'true')
-		goto(`/apps_raw/edit/u/${username}/draft_${uuid}?${params.toString()}`, {
-			replaceState: true
-		})
-	})
-</script>
+<!--
+	Never rendered — the sibling +page.ts redirects at the load phase, before
+	this component can mount. Kept as an empty file because SvelteKit only
+	registers a route when a +page.svelte exists.
+-->
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.ts b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.ts
new file mode 100644
index 0000000000..e57a7443f6
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.ts
@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit'
+import { base } from '$app/paths'
+import { get } from 'svelte/store'
+import { userStore } from '$lib/stores'
+import type { PageLoad } from './$types'
+
+// See /scripts/add/+page.ts for the rationale — redirect at load time
+// to avoid mounting a blank route component and flashing white.
+
+export const prerender = false
+
+export const load: PageLoad = ({ url }) => {
+	const username = get(userStore)?.username ?? 'me'
+	const uuid = crypto.randomUUID()
+	const params = new URLSearchParams(url.searchParams)
+	params.set('new_draft', 'true')
+	redirect(307, `${base}/apps_raw/edit/u/${username}/draft_${uuid}?${params.toString()}`)
+}
diff --git a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
index 403986cc14..e54568a9ed 100644
--- a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
@@ -1,22 +1,5 @@
-<script lang="ts">
-	// `/flows/add` is a thin redirect onto the canonical editor at
-	// `/flows/edit/u/{user}/draft_{uuid}?new_draft=true`. See /scripts/add
-	// for the design rationale — all editor logic lives in
-	// /flows/edit/[...path]. The `u/{user}/` prefix matches Windmill's
-	// path scheme so the draft slot lives in the authed user's namespace.
-	import { goto } from '$lib/navigation'
-	import { page } from '$app/state'
-	import { userStore } from '$lib/stores'
-	import { get } from 'svelte/store'
-	import { onMount } from 'svelte'
-
-	onMount(() => {
-		const username = get(userStore)?.username ?? 'me'
-		const uuid = crypto.randomUUID()
-		const params = new URLSearchParams(page.url.searchParams)
-		params.set('new_draft', 'true')
-		goto(`/flows/edit/u/${username}/draft_${uuid}?${params.toString()}`, {
-			replaceState: true
-		})
-	})
-</script>
+<!--
+	Never rendered — the sibling +page.ts redirects at the load phase, before
+	this component can mount. Kept as an empty file because SvelteKit only
+	registers a route when a +page.svelte exists.
+-->
diff --git a/frontend/src/routes/(root)/(logged)/flows/add/+page.ts b/frontend/src/routes/(root)/(logged)/flows/add/+page.ts
new file mode 100644
index 0000000000..56ea4bd08b
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.ts
@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit'
+import { base } from '$app/paths'
+import { get } from 'svelte/store'
+import { userStore } from '$lib/stores'
+import type { PageLoad } from './$types'
+
+// See /scripts/add/+page.ts for the rationale — redirect at load time
+// to avoid mounting a blank route component and flashing white.
+
+export const prerender = false
+
+export const load: PageLoad = ({ url }) => {
+	const username = get(userStore)?.username ?? 'me'
+	const uuid = crypto.randomUUID()
+	const params = new URLSearchParams(url.searchParams)
+	params.set('new_draft', 'true')
+	redirect(307, `${base}/flows/edit/u/${username}/draft_${uuid}?${params.toString()}`)
+}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
index 4b5a2f6346..7f7a19ca9b 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
@@ -1,30 +1,6 @@
-<script lang="ts">
-	// `/scripts/add` is a thin redirect onto the canonical editor at
-	// `/scripts/edit/u/{user}/draft_{uuid}?new_draft=true`. All editor logic
-	// — fetch, seed handling, autosave wiring — lives in
-	// `/scripts/edit/[...path]`; keeping it in one place means a single
-	// source of truth for the editor's load lifecycle.
-	//
-	// The `u/{user}/` prefix matches Windmill's path scheme so the
-	// draft slot lives in the authed user's namespace from the start.
-	// `new_draft=true` tells the edit page "first mount, don't fetch the
-	// non-existent item; seed empty." The flag is consumed and stripped
-	// from the URL by the edit page on first render. Any other query
-	// params (`template`, `hub`, `tutorial`, ...) ride along untouched so
-	// existing entry-points keep working.
-	import { goto } from '$lib/navigation'
-	import { page } from '$app/state'
-	import { userStore } from '$lib/stores'
-	import { get } from 'svelte/store'
-	import { onMount } from 'svelte'
-
-	onMount(() => {
-		const username = get(userStore)?.username ?? 'me'
-		const uuid = crypto.randomUUID()
-		const params = new URLSearchParams(page.url.searchParams)
-		params.set('new_draft', 'true')
-		goto(`/scripts/edit/u/${username}/draft_${uuid}?${params.toString()}`, {
-			replaceState: true
-		})
-	})
-</script>
+<!--
+	Never rendered — the sibling +page.ts redirects at the load phase, before
+	this component can mount. Kept as an empty file because SvelteKit only
+	registers a route when a +page.svelte exists; without it, /scripts/add
+	would 404 before the +page.ts ran.
+-->
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.ts b/frontend/src/routes/(root)/(logged)/scripts/add/+page.ts
new file mode 100644
index 0000000000..1cb4b3d984
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.ts
@@ -0,0 +1,27 @@
+import { redirect } from '@sveltejs/kit'
+import { base } from '$app/paths'
+import { get } from 'svelte/store'
+import { userStore } from '$lib/stores'
+import type { PageLoad } from './$types'
+
+// Redirect at the load phase, before the +page.svelte ever mounts. The
+// onMount-then-goto version this replaces painted a blank component for
+// one frame before navigating, hence the white flash; doing the work in
+// `load` lets SvelteKit cancel the route transition and head straight
+// for the edit page.
+//
+// `userStore` is populated client-side by the (logged) layout, so by
+// the time this load runs (always after layout setup) it usually has
+// the real username. The `'me'` fallback is the same one the original
+// onMount used — keeps behavior identical for the rare race where the
+// store hasn't filled yet.
+
+export const prerender = false
+
+export const load: PageLoad = ({ url }) => {
+	const username = get(userStore)?.username ?? 'me'
+	const uuid = crypto.randomUUID()
+	const params = new URLSearchParams(url.searchParams)
+	params.set('new_draft', 'true')
+	redirect(307, `${base}/scripts/edit/u/${username}/draft_${uuid}?${params.toString()}`)
+}