dox(spinners): fixes page hierarchy of components by harry-whorlow · Pull Request #1121 · TanStack/tanstack.com · GitHub

Summary by CodeRabbit

Documentation
- Improved Spinner and PixelSpinner page descriptions with clearer formatting.
- Added links to relevant source paths, opening securely in new tabs.
Style
- Added spacing improvements to component preview headers and code-toggle controls.

📝 Walkthrough

Walkthrough

The PR adds spacing in DsKit controls and converts spinner page descriptions to JSX. The descriptions include line breaks and links to the Spinner and PixelSpinner source files.

Changes

Design system updates

Layer / File(s)	Summary
Design-system component spacing src/components/ds/DsKit.tsx	Adds spacing around the optional preview description and after the code-toggle button.
Spinner page descriptions src/routes/ds.spinner.tsx	Expands Spinner and Headbanger descriptions with line breaks and source links that open in new tabs without referrer data.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

TanStack/tanstack.com#1075: Modifies shared design-system description and preview components.

Suggested reviewers: sukvvon

🚥 Pre-merge checks | ✅ 5 ✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies documentation changes for spinner component page hierarchy.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 🧪 Generate unit tests (beta)

Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/ds/DsKit.tsx`:
- Around line 146-151: Update the description layout around DsDescription in
DsKit.tsx to use an explicit spacing utility on the appropriate wrapper when
separation from the title is required; remove reliance on blank JSX lines for
visual spacing. Keep the existing controls gap-1 styling unchanged.

In `@src/routes/ds.spinner.tsx`:
- Around line 19-20: Update the Route.head metadata in src/routes/ds.spinner.tsx
to use the collection title “Spinners” and a description covering both Spinner
and Headbanger, matching the visible page content.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info ⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: fa9ada46-ec72-44d5-8743-5440f52ee449

📥 Commits

Reviewing files that changed from the base of the PR and between e95911b and ec96b3a.

📒 Files selected for processing (2)

src/components/ds/DsKit.tsx
src/routes/ds.spinner.tsx

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use layout utilities for visual spacing.

These added blank lines do not change the rendered layout. JSX source whitespace does not create margin or gap. If the description needs separation from the title, add a spacing class to the wrapper. The controls already have gap-1 at Line 153, so Line 168 is only source formatting.

Also applies to: 168-168

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ds/DsKit.tsx` around lines 146 - 151, Update the description
layout around DsDescription in DsKit.tsx to use an explicit spacing utility on
the appropriate wrapper when separation from the title is required; remove
reliance on blank JSX lines for visual spacing. Keep the existing controls gap-1
styling unchanged.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Update the page metadata for the new collection.

The visible page now uses title="Spinners" and documents both Spinner and Headbanger, but Route.head still uses the singular title and description. Update the metadata so browser and search metadata describe the full collection.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/routes/ds.spinner.tsx` around lines 19 - 20, Update the Route.head
metadata in src/routes/ds.spinner.tsx to use the collection title “Spinners” and
a description covering both Spinner and Headbanger, matching the visible page
content.

harry-whorlow and others added 2 commits August 5, 2026 10:19

dox(spinners): fixes page hierarchy of components

a2dd7ad

ci: apply automated fixes

ec96b3a

coderabbitai Bot reviewed Aug 5, 2026

View reviewed changes

                           {description ? (
                             <DsDescription variant="preview">{description}</DsDescription>
                           ) : null}
                         </div>

dox(spinners): fixes page hierarchy of components by harry-whorlow · Pull Request #1121 · TanStack/tanstack.com · GitHub

Uh oh!

Uh oh!

dox(spinners): fixes page hierarchy of components - #1121

dox(spinners): fixes page hierarchy of components#1121
harry-whorlow wants to merge 2 commits into
TanStack:mainfrom
harry-whorlow:spinner-docs

harry-whorlow commented Aug 5, 2026 •
edited by coderabbitai Bot
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 5, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Aug 5, 2026

Uh oh!

coderabbitai Bot Aug 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		title="Spinners"
		description="A collection of TanStack spinners produced by us for the community."

dox(spinners): fixes page hierarchy of components by harry-whorlow · Pull Request #1121 · TanStack/tanstack.com · GitHub

Uh oh!

Uh oh!

dox(spinners): fixes page hierarchy of components - #1121

dox(spinners): fixes page hierarchy of components#1121harry-whorlow wants to merge 2 commits intoTanStack:mainTanStack/tanstack.com:mainfrom harry-whorlow:spinner-docsharry-whorlow/tanstack.com:spinner-docsCopy head branch name to clipboard

Conversation

harry-whorlow commented Aug 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Aug 5, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Aug 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dox(spinners): fixes page hierarchy of components#1121
harry-whorlow wants to merge 2 commits into
TanStack:mainfrom
harry-whorlow:spinner-docs

harry-whorlow commented Aug 5, 2026 •
edited by coderabbitai Bot
Loading

coderabbitai Bot commented Aug 5, 2026 •
edited
Loading