test(solid-start): manual suspense boundaries transition on navigation

[birkskyum]

closes #5636

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

for solid, it's necessary to set placeholderData

Summary by CodeRabbit

• New Features

  • Introduced /suspense-transition route in React and Solid example applications, featuring manual suspense boundaries and query parameter-based data management during navigation.

• Tests

  • Added end-to-end tests verifying suspense boundary behavior during navigation, validating proper content visibility and transitions across both frameworks.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR adds a new /suspense-transition route and corresponding E2E tests to both React Start and Solid Start example projects. The route demonstrates Suspense boundary behavior during navigation using simulated async queries with artificial delays, enabling manual verification that Suspense boundaries transition properly on navigation without prematurely showing fallback content.

Changes

Cohort / File(s)	Summary
React Start: Route tree and component e2e/react-start/basic-react-query/src/routeTree.gen.ts, e2e/react-start/basic-react-query/src/routes/suspense-transition.tsx	Generated route tree updated to register new /suspense-transition route with type definitions. New route component created with SSR disabled, demonstrating async data flow using React Query with Suspense boundary and test data attributes.
Solid Start: Route tree and component e2e/solid-start/basic-solid-query/src/routeTree.gen.ts, e2e/solid-start/basic-solid-query/src/routes/suspense-transition.tsx	Generated route tree updated to register new /suspense-transition route with type definitions. New route component created with SSR disabled, demonstrating async data flow using Solid Query with Suspense boundary and placeholderData for transition observability.
E2E Tests e2e/react-start/basic-react-query/tests/app.spec.ts, e2e/solid-start/basic-solid-query/tests/app.spec.ts	New Playwright tests added to verify manual Suspense boundary transitions on navigation, asserting old content visibility during transitions and correct values after completion.

Sequence Diagram

sequenceDiagram
    participant User
    participant App
    participant Query as React Query/<br/>Solid Query
    participant Suspense

    User->>App: Click "Increase" link
    Note over App: Navigate with new search param
    App->>Query: Fetch double(n+1)
    Note over Suspense: Old content visible<br/>No fallback shown
    Query->>Query: Wait 500ms
    Query-->>Suspense: Data arrives
    Note over Suspense: Transition to<br/>new content
    Suspense->>App: Render new values
    App->>User: Display n=2, double=4

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review focus areas:
  • Route tree type definitions and consistency across frameworks (React vs Solid)
  • Suspense boundary implementation in both route components—verify SSR is disabled and placeholder/delay logic is correct
  • E2E test assertions validate the core behavior: no fallback during transition, content persistence, and final values correctness
  • Minor heterogeneity across frameworks (React Query vs Solid Query patterns) requires separate verification per implementation

Possibly related issues

• solid-router: manual suspense boundaries don't transition on navigation #5636: Directly addresses the reported issue about manual Suspense boundaries not transitioning on navigation by providing reproducible examples and E2E test coverage for both React and Solid frameworks.

Suggested labels

package: solid-router

Suggested reviewers

• brenelz
• schiller-manuel

Poem

🐰 A suspense tale, quite grand,
With transitions that land,
Old content stays true,
While new data flows through,
No fallbacks to hinder or stand! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch test(solid-start)--manual-suspense-boundaries-transition-on-navigation

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 67acbde and ed450c0.

📒 Files selected for processing (6)

• e2e/react-start/basic-react-query/src/routeTree.gen.ts (11 hunks)
• e2e/react-start/basic-react-query/src/routes/suspense-transition.tsx (1 hunks)
• e2e/react-start/basic-react-query/tests/app.spec.ts (1 hunks)
• e2e/solid-start/basic-solid-query/src/routeTree.gen.ts (11 hunks)
• e2e/solid-start/basic-solid-query/src/routes/suspense-transition.tsx (1 hunks)
• e2e/solid-start/basic-solid-query/tests/app.spec.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ed450c0

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	1m 14s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-26 21:13:22 UTC

[pkg-pr-new]

More templates

• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5638

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5638

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5638

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5638

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5638

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5638

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5638

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5638

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5638

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5638

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5638

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5638

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5638

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5638

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5638

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5638

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5638

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5638

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5638

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5638

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5638

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5638

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5638

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5638

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5638

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5638

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5638

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5638

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5638

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5638

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5638

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5638

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5638

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5638

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5638

commit: ed450c0