TanStack / TanStack/router

Outlet in root route prevents suspense from bubbling up

Open
#2,026 5 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Describe the bug

I would like to use my own loading component at the root level. To do that I'm wrapping the <Outlet> in the root component with a <Suspense> block. Unfortunately, Outlet wraps the children in a <Suspense> block of its own, preventing mine from being used. Since I have no defaultPendingComponent configured, it renders nothing.

I have traced the issue to this part of the code: https://github.com/TanStack/router/blob/f7c74bc2d9fb8a587d300482e1d658a021792439/packages/react-router/src/Match.tsx#L294-L302

Your Example Website or App

https://stackblitz.com/edit/github-s38jue?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue
  1. Run the Stackblitz
Expected behavior

As a user, I expect to see the fallback content Suspense fallback - I expect this to show up, but I'm seeing nothing (besides the navigation)

Screenshots or Videos

No response

Platform
  • OS: macOS
  • Browser: Arc (Chrome)
  • Version: 1.52.0 (51895)
Additional context

Related issue: #1049

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the linked StackBlitz, then inspect packages/react-router/src/Match.tsx at the referenced lines. Verify that the root component's Suspense fallback is rendered when no defaultPendingComponent is configured, while preserving the expected navigation behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.