Fixed docs about deferred data loading#6932
Fixed docs about deferred data loading#6932segmentationfaulter wants to merge 1 commit intoTanStack:mainfrom
Conversation
|
📝 WalkthroughWalkthroughDocumentation update to the deferred data loading guide demonstrating a pattern shift where loading UI is moved from the Await component's fallback prop to an outer Suspense boundary. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment Tip CodeRabbit can scan for known vulnerabilities in your dependencies using OSV Scanner.OSV Scanner will automatically detect and report security vulnerabilities in your project's dependencies. No additional configuration is required. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/router/guide/deferred-data-loading.md (1)
42-42:⚠️ Potential issue | 🟡 MinorAdd missing
Suspenseimport.The code example on line 55 uses the
Suspensecomponent, but it's not imported. Users will get a reference error if they copy this example.📦 Proposed fix to add the missing import
-import { createFileRoute, Await } from '@tanstack/react-router' +import { createFileRoute, Await } from '@tanstack/react-router' +import { Suspense } from 'react'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/router/guide/deferred-data-loading.md` at line 42, The example uses the Suspense component but it's not imported; add an import for Suspense from 'react' (e.g., import { Suspense } from 'react') so the Suspense symbol used in the example is defined—update the top imports alongside the existing createFileRoute / Await usage to include this new import.
🧹 Nitpick comments (1)
docs/router/guide/deferred-data-loading.md (1)
55-61: Clarify whether to useAwait'sfallbackprop or an explicitSuspensewrapper.The documented code example uses an explicit
Suspenseboundary without using theAwaitcomponent'sfallbackprop. However, theAwaitcomponent implementation shows thefallbackprop is still supported and optional. Both patterns work—whenfallbackis provided,Awaitinternally wraps itself inSuspense.Add a note explaining which pattern is recommended, or document both approaches, so users understand when to use each pattern.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/router/guide/deferred-data-loading.md` around lines 55 - 61, Add a short explanatory note near the example clarifying that Await supports an optional fallback prop (Await fallback={...}) and will internally wrap itself with Suspense when provided, while the shown pattern uses an explicit Suspense wrapper; recommend using Await's fallback for simple single-promise cases (like Await with deferredSlowData) and prefer an explicit Suspense boundary when you need to group multiple Await instances or control a larger UI region. Include the symbols Suspense, Await, fallback, and deferredSlowData in the text so readers can find the relevant example.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@docs/router/guide/deferred-data-loading.md`:
- Line 42: The example uses the Suspense component but it's not imported; add an
import for Suspense from 'react' (e.g., import { Suspense } from 'react') so the
Suspense symbol used in the example is defined—update the top imports alongside
the existing createFileRoute / Await usage to include this new import.
---
Nitpick comments:
In `@docs/router/guide/deferred-data-loading.md`:
- Around line 55-61: Add a short explanatory note near the example clarifying
that Await supports an optional fallback prop (Await fallback={...}) and will
internally wrap itself with Suspense when provided, while the shown pattern uses
an explicit Suspense wrapper; recommend using Await's fallback for simple
single-promise cases (like Await with deferredSlowData) and prefer an explicit
Suspense boundary when you need to group multiple Await instances or control a
larger UI region. Include the symbols Suspense, Await, fallback, and
deferredSlowData in the text so readers can find the relevant example.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e0e7dada-6274-437f-a14f-d02ffd0cb64f
📒 Files selected for processing (1)
docs/router/guide/deferred-data-loading.md
1 participant
The suspense boundary wrapping the
Awaitcomponent was missing, alsofallbackprop was placed onAwaitcomponent which should have gone to theSuspensecomponent.Summary by CodeRabbit