solid-router: manual suspense boundaries don't transition on navigation

[jakst]

Which project does this relate to?

Router

Describe the bug

@tanstack/solid-router does not properly transition manual Suspense boundaries. I find that only the route boundaries get held up in a transition, while manual Suspense boundaries always show fallback on navigation.

Your Example Website or App

https://github.com/jakst/tss-suspense-transition

Steps to Reproduce the Bug or Issue

1. Clone repo, pnpm install, start dev server, open page
2. Click the button to increase the query param n
3. Observe that Suspense fallback always triggers

Expected behavior

I expect suspense boundaries to transition (i.e., hold the old value instead of falling back) on navigation.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.133.31
• OS: MacOS v15.6.1
• Browser: Chrome
• Browser Version: 141
• Bundler: vite
• Bundler Version: 7.1.12

Additional context

No response

[birkskyum]

@jakst , if you add placeholder data it'll look like below - does it solve the issue?

// src/routes/index.tsx
const doubleQueryOptions = (n: number) =>
	queryOptions({
		queryKey: ["double", n],
		queryFn: async () => {
			await new Promise((r) => setTimeout(r, 1000))
			return n * 2
		},
		placeholderData: (previousData) =>
  previousData
	})

Screen.Recording.2025-10-26.at.22.00.55.mov

[jakst]

@jakst , if you add placeholder data it'll look like below - does it solve the issue?

// src/routes/index.tsx
const doubleQueryOptions = (n: number) =>
queryOptions({
queryKey: ["double", n],
queryFn: async () => {
await new Promise((r) => setTimeout(r, 1000))
return n * 2
},
placeholderData: (previousData) =>
previousData
})

Yeah that seems to do it in our dashboard app as well! Looking forward to the fix landing in the next release :)

[jakst]

Oh wait, those were just the tests? 🤔

[jakst]

It's also happening with createResource, I updated the reproduction with it https://github.com/jakst/tss-suspense-transition. Would you consider reopening the issue?

[birkskyum]

@jakst , if you do doubleQuery.latest instead, then it shouldn't go to the fallback. I think it's reasonable to have that cache behavior be opt-in, similar to the placeholderData for query, because the single / double values are out of sync in this loading period, so the "Loading.." is technically more correct.

[jakst]

@birkskyum but that goes against how Suspense works in all other contexts. The router is supposed to hold to update of the query param until the suspending resource is finished to avoid tearing. That's how it works if you load the data through route loaders, and it's also how it works if you do the same thing in Solid Start. I don't understand why this case should be different? I'm giving you trivial examples here because it's good for reproducing, but in a real world app with hundreds of async resources you have to be able to control whether something suspends or not through calling startTransition(), not go adding .latest to every resource.

Here's the Solid Start equivalent: https://stackblitz.com/edit/github-28x64bqv-xthvnizs?file=src%2Froutes%2Findex.tsx. Notice that it always transitions without fallback, since route changes are always wrapped in a transition, just like in Tanstack Start.

[birkskyum]

Thanks for the other repro, i see the issue now. You're very welcome to help debug it as well, so that we can get it sorted asap. I made a TransitionSuspense here i believe does what you seek by holding the values, but we have to figure how to make the Suspense behave correctly.