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 && (