[DevTools] Gray out Suspense boundaries with no unique suspenders

[everettbu]

Mirror of facebook/react#35925
Original author: devjiwonchoi

---

Why?

When displaying all Suspense boundaries (filter off), every boundary is colored blue, making it hard to distinguish suspended from non-suspended or Parent suspended from the same ones. This change makes it easier to identify those Suspense boundaries so you can remove or lower them to keep the necessary Suspense closer to the dynamic data source.

Berfore	After
CleanShot.2026-02-27.at.23.10.07.mp4	CleanShot.2026-02-27.at.23.12.06.mp4

[greptile-apps]

Greptile Summary

This PR grays out Suspense boundaries in the DevTools Suspense tab that have no unique suspenders, making it easier to distinguish suspended from non-suspended boundaries when the filter is turned off. Previously, all boundaries were uniformly colored blue.

• Adds hasUniqueSuspenders to the SuspenseTimelineStep type and propagates it from SuspenseNode data through all timeline construction paths in store.js
• Applies a --color-dim override CSS class to boundary rectangles, selection outlines, and scrubber beads when hasUniqueSuspenders is false
• CSS specificity is handled correctly for the scrubber's combined selected+not-suspended state

Confidence Score: 5/5

• This PR is safe to merge — it's a visual-only enhancement to DevTools with no runtime impact on applications.
• The changes are straightforward: propagating an existing boolean property to a new type and using it to conditionally apply a CSS class. The logic is correct across all code paths, CSS specificity is properly handled, and the change is purely cosmetic within DevTools.
• No files require special attention.

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/devtools/store.js	Propagates hasUniqueSuspenders from SuspenseNode to SuspenseTimelineStep in initial paint roots (with union logic), transition roots, and child boundaries. Logic is correct.
packages/react-devtools-shared/src/frontend/types.js	Adds hasUniqueSuspenders: boolean field to the SuspenseTimelineStep type definition.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js	Applies gray-out CSS class to Suspense boundary rects and selection outlines when hasUniqueSuspenders is false.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js	Applies not-suspended CSS class to scrubber beads when the timeline step has no unique suspenders.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css	Adds .SuspenseRectsBoundaryNotSuspended class that overrides --color-suspense with --color-dim to gray out boundaries.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css	Adds dimmed styling for scrubber beads without unique suspenders, including a combined selected+not-suspended rule with correct specificity.

_{Last reviewed commit: 465e778}

[greptile-apps]

_{6 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}