[DevTools] Hide State and Props in the Sidebar for Suspense

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) ||

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -269,18 +269,21 @@ export default function InspectedElementWrapper(_: Props): React.Node {
             <ButtonIcon type="error" />
           </Toggle>
         )}
-        {canToggleSuspense && (
+        {canToggleSuspense || isSuspended ? (
           <Toggle
             isChecked={isSuspended}
+            isDisabled={!canToggleSuspense}
             onChange={toggleSuspended}
             title={
               isSuspended
-                ? 'Unsuspend the selected component'
+                ? canToggleSuspense
+                  ? 'Unsuspend the selected component'
+                  : 'This boundary is still suspended'
                 : 'Suspend the selected component'
             }>
             <ButtonIcon type="suspend" />
           </Toggle>
-        )}
+        ) : null}
         {store.supportsInspectMatchingDOMElement && (
           <Button
             onClick={highlightElement}

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js

@@ -17,7 +17,10 @@ import NewKeyValue from './NewKeyValue';
 import {alphaSortEntries, serializeDataForCopy} from '../utils';
 import Store from '../../store';
 import styles from './InspectedElementSharedStyles.css';
-import {ElementTypeClass} from 'react-devtools-shared/src/frontend/types';
+import {
+  ElementTypeClass,
+  ElementTypeSuspense,
+} from 'react-devtools-shared/src/frontend/types';
 import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
 
 import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
@@ -47,6 +50,16 @@ export default function InspectedElementPropsTree({
     type,
   } = inspectedElement;
 
+  if (type === ElementTypeSuspense) {
+    // Skip showing the props for Suspense. We want to give more real estate to the
+    // "Suspended by" for Suspense boundaries. We could maybe show it further below
+    // but in practice, the props of Suspense boundaries are not very useful to
+    // inspect because the name shows in the tree already. The children in the tree
+    // will be either the "fallback" or "children" prop which you can already inspect
+    // but resuspending the tree.
+    return null;
+  }
+
   const canDeletePaths =
     type === ElementTypeClass || canEditFunctionPropsDeletePaths;
   const canEditValues =

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js

@@ -322,6 +322,17 @@ export default function InspectedElementSuspendedBy({
     (suspendedBy == null || suspendedBy.length === 0) &&
     inspectedElement.unknownSuspenders === UNKNOWN_SUSPENDERS_NONE
   ) {
+    if (inspectedElement.isSuspended) {
+      // If we're still suspended, show a place holder until the data loads.
+      // We don't know what we're suspended by until it has loaded.
+      return (
+        <div>
+          <div className={styles.HeaderRow}>
+            <div className={styles.Header}>suspended...</div>
+          </div>
+        </div>
+      );
+    }
     return null;
   }
 

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -17,7 +17,6 @@ import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
 import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
-import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
 import InspectedElementSuspendedBy from './InspectedElementSuspendedBy';
 import NativeStyleEditor from './NativeStyleEditor';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
@@ -95,14 +94,6 @@ export default function InspectedElementView({
           />
         </div>
 
-        <div className={styles.InspectedElementSection}>
-          <InspectedElementSuspenseToggle
-            bridge={bridge}
-            inspectedElement={inspectedElement}
-            store={store}
-          />
-        </div>
-
         <div className={styles.InspectedElementSection}>
           <InspectedElementStateTree
             bridge={bridge}