test(router, start): query navigation transitions

e2e/react-router/basic-react-query-file-based/src/routes/transition/count/query.tsx

@@ -1,5 +1,5 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { Suspense, useMemo } from 'react'
+import { Suspense } from 'react'
 import { queryOptions, useQuery } from '@tanstack/react-query'
 import { z } from 'zod'
 
@@ -12,7 +12,7 @@ const doubleQueryOptions = (n: number) =>
     queryKey: ['transition-double', n],
     queryFn: async () => {
       await new Promise((resolve) => setTimeout(resolve, 1000))
-      return n * 2
+      return { n, double: n * 2 }
     },
     placeholderData: (oldData) => oldData,
   })
@@ -44,8 +44,10 @@ function TransitionPage() {
         </Link>
 
         <div className="mt-2">
-          <div data-testid="n-value">n: {search.n}</div>
-          <div data-testid="double-value">double: {doubleQuery.data}</div>
+          <div data-testid="n-value">n: {doubleQuery.data?.n}</div>
+          <div data-testid="double-value">
+            double: {doubleQuery.data?.double}
+          </div>
         </div>
       </div>
     </Suspense>

e2e/react-router/basic-react-query-file-based/tests/transition.spec.ts

@@ -1,37 +1,95 @@
 import { expect, test } from '@playwright/test'
 
-test('react-query transitions keep previous data during navigation', async ({
+test('transitions/count/query should keep old values visible during navigation', async ({
   page,
 }) => {
   await page.goto('/transition/count/query')
 
   await expect(page.getByTestId('n-value')).toContainText('n: 1')
   await expect(page.getByTestId('double-value')).toContainText('double: 2')
 
-  const bodySnapshots: Array<string> = []
+  const bodyTexts: Array<string> = []
 
-  const interval = setInterval(async () => {
+  const pollInterval = setInterval(async () => {
     const text = await page
       .locator('body')
       .textContent()
       .catch(() => '')
-    if (text) bodySnapshots.push(text)
+    if (text) bodyTexts.push(text)
   }, 50)
 
-  await page.getByTestId('increase-button').click()
+  // 1 click
+
+  page.getByTestId('increase-button').click()
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 1', {
+    timeout: 2_000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 2', {
+    timeout: 2_000,
+  })
 
   await page.waitForTimeout(200)
 
-  clearInterval(interval)
+  await expect(page.getByTestId('n-value')).toContainText('n: 2', {
+    timeout: 2000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 4', {
+    timeout: 2000,
+  })
+
+  // 2 clicks
+
+  page.getByTestId('increase-button').click()
+  page.getByTestId('increase-button').click()
 
   await expect(page.getByTestId('n-value')).toContainText('n: 2', {
-    timeout: 2_000,
+    timeout: 2000,
   })
   await expect(page.getByTestId('double-value')).toContainText('double: 4', {
-    timeout: 2_000,
+    timeout: 2000,
+  })
+
+  await page.waitForTimeout(200)
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 4', {
+    timeout: 2000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 8', {
+    timeout: 2000,
+  })
+
+  // 3 clicks
+
+  page.getByTestId('increase-button').click()
+  page.getByTestId('increase-button').click()
+  page.getByTestId('increase-button').click()
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 4', {
+    timeout: 2000,
   })
+  await expect(page.getByTestId('double-value')).toContainText('double: 8', {
+    timeout: 2000,
+  })
+
+  await page.waitForTimeout(200)
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 7', {
+    timeout: 2000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 14', {
+    timeout: 2000,
+  })
+
+  clearInterval(pollInterval)
 
-  const sawLoading = bodySnapshots.some((text) => text.includes('Loading...'))
+  // With proper transitions, old values should remain visible until new ones arrive
+  const hasLoadingText = bodyTexts.some((text) => text.includes('Loading...'))
 
-  expect(sawLoading).toBeFalsy()
+  if (hasLoadingText) {
+    throw new Error(
+      'FAILED: "Loading..." appeared during navigation. ' +
+        'Solid Router should use transitions to keep old values visible.',
+    )
+  }
 })

e2e/react-start/basic-react-query/package.json

@@ -21,7 +21,8 @@
     "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.6.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",

e2e/react-start/basic-react-query/src/routeTree.gen.ts

@@ -22,6 +22,7 @@ import { Route as UsersUserIdRouteImport } from './routes/users.$userId'
 import { Route as PostsPostIdRouteImport } from './routes/posts.$postId'
 import { Route as ApiUsersRouteImport } from './routes/api.users'
 import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'
+import { Route as TransitionCountQueryRouteImport } from './routes/transition/count/query'
 import { Route as PostsPostIdDeepRouteImport } from './routes/posts_.$postId.deep'
 import { Route as ApiUsersIdRouteImport } from './routes/api/users.$id'
 import { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b'
@@ -90,6 +91,11 @@ const LayoutLayout2Route = LayoutLayout2RouteImport.update({
   id: '/_layout-2',
   getParentRoute: () => LayoutRoute,
 } as any)
+const TransitionCountQueryRoute = TransitionCountQueryRouteImport.update({
+  id: '/transition/count/query',
+  path: '/transition/count/query',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PostsPostIdDeepRoute = PostsPostIdDeepRouteImport.update({
   id: '/posts_/$postId/deep',
   path: '/posts/$postId/deep',
@@ -127,6 +133,7 @@ export interface FileRoutesByFullPath {
   '/layout-b': typeof LayoutLayout2LayoutBRoute
   '/api/users/$id': typeof ApiUsersIdRoute
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
+  '/transition/count/query': typeof TransitionCountQueryRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -142,6 +149,7 @@ export interface FileRoutesByTo {
   '/layout-b': typeof LayoutLayout2LayoutBRoute
   '/api/users/$id': typeof ApiUsersIdRoute
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
+  '/transition/count/query': typeof TransitionCountQueryRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -162,6 +170,7 @@ export interface FileRoutesById {
   '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute
   '/api/users/$id': typeof ApiUsersIdRoute
   '/posts_/$postId/deep': typeof PostsPostIdDeepRoute
+  '/transition/count/query': typeof TransitionCountQueryRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -181,6 +190,7 @@ export interface FileRouteTypes {
     | '/layout-b'
     | '/api/users/$id'
     | '/posts/$postId/deep'
+    | '/transition/count/query'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -196,6 +206,7 @@ export interface FileRouteTypes {
     | '/layout-b'
     | '/api/users/$id'
     | '/posts/$postId/deep'
+    | '/transition/count/query'
   id:
     | '__root__'
     | '/'
@@ -215,6 +226,7 @@ export interface FileRouteTypes {
     | '/_layout/_layout-2/layout-b'
     | '/api/users/$id'
     | '/posts_/$postId/deep'
+    | '/transition/count/query'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -227,6 +239,7 @@ export interface RootRouteChildren {
   UsersRoute: typeof UsersRouteWithChildren
   ApiUsersRoute: typeof ApiUsersRouteWithChildren
   PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
+  TransitionCountQueryRoute: typeof TransitionCountQueryRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -322,6 +335,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutLayout2RouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/transition/count/query': {
+      id: '/transition/count/query'
+      path: '/transition/count/query'
+      fullPath: '/transition/count/query'
+      preLoaderRoute: typeof TransitionCountQueryRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/posts_/$postId/deep': {
       id: '/posts_/$postId/deep'
       path: '/posts/$postId/deep'
@@ -424,6 +444,7 @@ const rootRouteChildren: RootRouteChildren = {
   UsersRoute: UsersRouteWithChildren,
   ApiUsersRoute: ApiUsersRouteWithChildren,
   PostsPostIdDeepRoute: PostsPostIdDeepRoute,
+  TransitionCountQueryRoute: TransitionCountQueryRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

e2e/react-start/basic-react-query/src/routes/transition/count/query.tsx

@@ -0,0 +1,55 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { queryOptions, useQuery } from '@tanstack/react-query'
+import { z } from 'zod'
+
+const searchSchema = z.object({
+  n: z.number().default(1),
+})
+
+const doubleQueryOptions = (n: number) =>
+  queryOptions({
+    queryKey: ['transition-double', n],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return { n, double: n * 2 }
+    },
+    placeholderData: (oldData) => oldData,
+  })
+
+export const Route = createFileRoute('/transition/count/query')({
+  validateSearch: searchSchema,
+  loader: ({ context: { queryClient }, location }) => {
+    const { n } = searchSchema.parse(location.search)
+    return queryClient.ensureQueryData(doubleQueryOptions(n))
+  },
+  component: TransitionPage,
+})
+
+function TransitionPage() {
+  const search = Route.useSearch()
+
+  const doubleQuery = useQuery(doubleQueryOptions(search.n))
+
+  return (
+    <Suspense fallback="Loading...">
+      <div className="p-2">
+        <Link
+          data-testid="increase-button"
+          className="border bg-gray-50 px-3 py-1"
+          from="/transition/count/query"
+          search={(s) => ({ n: s.n + 1 })}
+        >
+          Increase
+        </Link>
+
+        <div className="mt-2">
+          <div data-testid="n-value">n: {doubleQuery.data?.n}</div>
+          <div data-testid="double-value">
+            double: {doubleQuery.data?.double}
+          </div>
+        </div>
+      </div>
+    </Suspense>
+  )
+}

e2e/react-start/basic-react-query/tests/transition.spec.ts

@@ -0,0 +1,95 @@
+import { expect, test } from '@playwright/test'
+
+test('transitions/count/query should keep old values visible during navigation', async ({
+  page,
+}) => {
+  await page.goto('/transition/count/query')
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 1')
+  await expect(page.getByTestId('double-value')).toContainText('double: 2')
+
+  const bodyTexts: Array<string> = []
+
+  const pollInterval = setInterval(async () => {
+    const text = await page
+      .locator('body')
+      .textContent()
+      .catch(() => '')
+    if (text) bodyTexts.push(text)
+  }, 50)
+
+  // 1 click
+
+  page.getByTestId('increase-button').click()
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 1', {
+    timeout: 2_000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 2', {
+    timeout: 2_000,
+  })
+
+  await page.waitForTimeout(200)
+
+  await expect(page.getByTestId('n-value')).toContainText('n: 2', {
+    timeout: 2000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 4', {
+    timeout: 2000,
+  })
+
+  // 2 clicks
+
+  // page.getByTestId('increase-button').click()
+  // page.getByTestId('increase-button').click()
+
+  // await expect(page.getByTestId('n-value')).toContainText('n: 2', {
+  //   timeout: 2000,
+  // })
+  // await expect(page.getByTestId('double-value')).toContainText('double: 4', {
+  //   timeout: 2000,
+  // })
+
+  // await page.waitForTimeout(200)
+
+  // await expect(page.getByTestId('n-value')).toContainText('n: 4', {
+  //   timeout: 2000,
+  // })
+  // await expect(page.getByTestId('double-value')).toContainText('double: 8', {
+  //   timeout: 2000,
+  // })
+
+  // // 3 clicks
+
+  // page.getByTestId('increase-button').click()
+  // page.getByTestId('increase-button').click()
+  // page.getByTestId('increase-button').click()
+
+  // await expect(page.getByTestId('n-value')).toContainText('n: 4', {
+  //   timeout: 2000,
+  // })
+  // await expect(page.getByTestId('double-value')).toContainText('double: 8', {
+  //   timeout: 2000,
+  // })
+
+  // await page.waitForTimeout(200)
+
+  // await expect(page.getByTestId('n-value')).toContainText('n: 7', {
+  //   timeout: 2000,
+  // })
+  // await expect(page.getByTestId('double-value')).toContainText('double: 14', {
+  //   timeout: 2000,
+  // })
+
+  clearInterval(pollInterval)
+
+  // With proper transitions, old values should remain visible until new ones arrive
+  const hasLoadingText = bodyTexts.some((text) => text.includes('Loading...'))
+
+  if (hasLoadingText) {
+    throw new Error(
+      'FAILED: "Loading..." appeared during navigation. ' +
+        'Solid Router should use transitions to keep old values visible.',
+    )
+  }
+})