solid-router: css animations are re-triggered after query updates

[PierBover]

Which project does this relate to?

Router

Describe the bug

When using query with solid router, the routes are remounted when the query updates which unfortunately causes CSS animations to retrigger.

tanstack.mov

When the route mounts, the red rectangle will fade in which is expected. But after a few seconds it will re-flash again when the query updates because it seems the route DOM element is remounted.

Complete minimal reproducer

https://github.com/PierBover/tanstack-solid-router-repro

Steps to Reproduce the Bug

npm i && npm run dev

Then navigate between the routes.

Expected behavior

The route should not be remounted and CSS animations should not be re-triggered. The query data should be updated reactively, probably?

Platform

    "@tanstack/solid-query": "5.101.4",
    "@tanstack/solid-router": "latest",
    "solid-js": "^1.9.12"

I'm on macOS Sequoia and I've seen this happening in both Chrome and Firefox.

[PierBover]

I've reproduced this in the official basic-solid-query-file-based example.

Screen.Recording.2026-08-08.at.12.29.51.p.m.mov

I added 10 seconds of stale time to the query options:

export const postQueryOptions = (postId: string) =>
  queryOptions({
    queryKey: ['posts', { postId }],
    queryFn: () => fetchPost(postId),
    staleTime: 10000
  })

Then added a fade-in class to the post route to show the re-triggering of CSS animations.

@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

.fade-in {
	animation-name: fade-in;
	animation-iteration-count: 1;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

    <div class="space-y-2 fade-in">
      <h4 class="text-xl font-bold underline">{post().data?.title}</h4>
      <div class="text-sm">{post().data?.body}</div>
    </div>

[Sheraff]

Could you see if this #8002 fixes your issue? (there are pkg-pr-new preview releases down in the PR comments where you can test the PR)

[PierBover]

Hey @Sheraff

The issue is still there. I cloned the tanstack-router-solid-example-basic-solid-query-file-based with this link.

bug-tanstack.mov

[Sheraff]

This issue can be reproduced with only Solid and Query (and a <Suspense> boundary)
https://stackblitz.com/edit/solidjs-templates-rkxmwe15?file=src%2FApp.tsx

I don't think this is a Router issue. I've forwarded this issue to the Query team.