From e576b65e2cb1a1a64a88e8defe4edbe1fdfbc001 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sat, 27 Sep 2025 23:26:07 -0400
Subject: [PATCH 1/4] Hide props section for Suspense boundaries

---
 .../views/Components/InspectedElementPropsTree.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index 729b517b46f98..dddc6e6a9de8e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/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 =

From 062c6cfbe192956038d234cedf5471ee277f0d6c Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sat, 27 Sep 2025 23:45:37 -0400
Subject: [PATCH 2/4] Show a disabled Suspense icon while the tree is still
 suspended from initial mount

---
 .../react-devtools-shared/src/backend/fiber/renderer.js  | 7 ++-----
 .../src/devtools/views/Components/InspectedElement.js    | 9 ++++++---
 2 files changed, 8 insertions(+), 8 deletions(-)

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 {
             <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}

From e6a90976cd1f362c34523f260ac244364410ac93 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sat, 27 Sep 2025 23:47:00 -0400
Subject: [PATCH 3/4] Delete suspense toggle section in side panel

We can already see this state and switch its state in the toolbar.
---
 .../InspectedElementSuspenseToggle.js         | 72 -------------------
 .../views/Components/InspectedElementView.js  |  9 ---
 2 files changed, 81 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
deleted file mode 100644
index ebb4b5bcd5439..0000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {OptionsContext} from '../context';
-import EditableValue from './EditableValue';
-import Store from '../../store';
-import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
-import styles from './InspectedElementSharedStyles.css';
-
-import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
-import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
-
-type Props = {
-  bridge: FrontendBridge,
-  inspectedElement: InspectedElement,
-  store: Store,
-};
-
-export default function InspectedElementSuspenseToggle({
-  bridge,
-  inspectedElement,
-  store,
-}: Props): React.Node {
-  const {readOnly} = React.useContext(OptionsContext);
-
-  const {id, isSuspended, type} = inspectedElement;
-  const canToggleSuspense = !readOnly && inspectedElement.canToggleSuspense;
-
-  if (type !== ElementTypeSuspense) {
-    return null;
-  }
-
-  const toggleSuspense = (path: any, value: boolean) => {
-    const rendererID = store.getRendererIDForElement(id);
-    if (rendererID !== null) {
-      bridge.send('overrideSuspense', {
-        id,
-        rendererID,
-        forceFallback: value,
-      });
-    }
-  };
-
-  return (
-    <div>
-      <div className={styles.HeaderRow}>
-        <div className={styles.Header}>suspense</div>
-      </div>
-      <div className={styles.ToggleSuspenseRow}>
-        <span className={styles.Name}>Suspended</span>
-        {canToggleSuspense ? (
-          // key is required to keep <EditableValue> and header row toggle button in sync
-          <EditableValue
-            key={isSuspended}
-            overrideValue={toggleSuspense}
-            path={['suspense', 'Suspended']}
-            value={isSuspended}
-          />
-        ) : (
-          <span className={styles.Value}>{isSuspended ? 'true' : 'false'}</span>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index 7e2175db741f2..fef9a04985e5f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/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}

From 750c38ee25f3fc20516492eaf546e0fa9d0d2ecf Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sat, 27 Sep 2025 23:54:03 -0400
Subject: [PATCH 4/4] Show a placeholder while the initial tree is suspended

---
 .../views/Components/InspectedElementSuspendedBy.js   | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
index 54a1c6c9529bf..d1da51a0cf1fe 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
+++ b/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;
   }