From c825f030679c41b55faf448648cee4e41dff3787 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 2 Oct 2025 15:18:41 -0400 Subject: [PATCH 01/11] [DevTools] Hide State and Props in the Sidebar for Suspense (#34630) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We're showing too much noise in the side-panel when selecting a Suspense boundary. The interesting thing to see directly is the "Suspended by". The "props" are mostly useless because the `"name"` prop is already in the tree. I'm now also showing it in the title bar of the selected element panel. The "children" and "fallback" props are just the thing that you can see in the tree view anyway. The "state" is this weird section with just one field in it, which we already have duplicated in the top toolbar as well. We can just delete this. I make sure to show the icon and a "suspended..." section while the boundary is still loading but now yet resuspended by force suspending. While still loading: Screenshot 2025-09-27 at 11 54 37 PM After loading: Screenshot 2025-09-27 at 11 54 53 PM Resuspended after loading: Screenshot 2025-09-27 at 11 55 07 PM --- .../src/backend/fiber/renderer.js | 7 +- .../views/Components/InspectedElement.js | 9 ++- .../Components/InspectedElementPropsTree.js | 15 +++- .../Components/InspectedElementSuspendedBy.js | 11 +++ .../InspectedElementSuspenseToggle.js | 72 ------------------- .../views/Components/InspectedElementView.js | 9 --- 6 files changed, 33 insertions(+), 90 deletions(-) delete mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 222baa0dae04c..ba214db05c7dd 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -6596,9 +6596,6 @@ export function attach( rootType = fiberRoot._debugRootType; } - const isTimedOutSuspense = - tag === SuspenseComponent && memoizedState !== null; - let isErrored = false; if (isErrorBoundary(fiber)) { // if the current inspected element is an error boundary, @@ -6670,7 +6667,7 @@ export function attach( if ( fiberInstance.suspenseNode !== null && fiberInstance.suspenseNode.hasUnknownSuspenders && - !isTimedOutSuspense + !isSuspended ) { // Something unknown threw to suspended this boundary. Let's figure out why that might be. if (renderer.bundleType === 0) { @@ -6708,7 +6705,7 @@ export function attach( supportsTogglingSuspense && hasSuspenseBoundary && // If it's showing the real content, we can always flip fallback. - (!isTimedOutSuspense || + (!isSuspended || // If it's showing fallback because we previously forced it to, // allow toggling it back to remove the fallback override. forceFallbackForFibers.has(fiber) || diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 08bba4f9da41f..88aeab7bfd413 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -269,18 +269,21 @@ export default function InspectedElementWrapper(_: Props): React.Node { )} - {canToggleSuspense && ( + {canToggleSuspense || isSuspended ? ( - )} + ) : null} {store.supportsInspectMatchingDOMElement && (