Suspense example in docs is incorrect

[mpiroc]

Describe the bug

A user on discord noticed that the fallback never renders for this example: https://tanstack.com/query/latest/docs/framework/react/examples/suspense

I believe this example is wrong. On the initial render, React.Suspsense's content successfully renders, it just renders null. So when Project or Projects suspend, react continues displaying the most recent successful render (null) until data has been fetched.

To fix this, move the null case outside of the React.Suspense component:

{showProjects ? (
  <React.Suspense fallback={<h1>Loading projects...</h1>}>
    {activeProject ? (
      <Project
        activeProject={activeProject}
        setActiveProject={setActiveProject}
      />
    ) : (
      <Projects setActiveProject={setActiveProject} />
    )}
  </React.Suspense>
) : null}

Your minimal, reproducible example

Original example:
https://tanstack.com/query/latest/docs/framework/react/examples/suspense?panel=sandbox

Fixed example:
https://stackblitz.com/edit/tanstack-query-4yma8xjz?file=src%2Findex.tsx

Steps to reproduce

1. Navigate to this example in your browser: https://tanstack.com/query/latest/docs/framework/react/examples/suspense
2. Click on the "Interactive Sandbox" tab
3. Click on the "Show projects" button

Expected: The fallback (Loading projects...) is rendered while the query is loading
Actual: null is rendered while the query is loading.

Expected behavior

As a developer, I expected the fallback (Loading projects...) to render. Instead, nothing (null) was rendered.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: MacOS
Browser: Chrome
Browser Version: 135.0.7049.85

Tanstack Query adapter

react-query

TanStack Query version

v5.74.3

TypeScript version

5.8.3

Additional context

No response

[xxziiko]

Hi @mpiroc, thanks for the clear issue and solution. I noticed this hasn't been updated for a few weeks.
Would you mind if I pick this up and create a PR for it?

[mpiroc]

@xxziiko Go for it!

[xxziiko]

@mpiroc Thanks! I'll get started on a PR for this and will link it here once it's ready.

[injae-kim]

fix PR: #9119 👍