From 8ee73115c4da895bfa313b43d6c75be7acac8cbc Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Wed, 31 Jul 2024 16:26:40 -0400
Subject: [PATCH] Remove Suspense around InspectedElement

We should be just using the Transition value "inspectedElementID".

We could useDeferredValue but we already have an implementation of this
ID using a reducer but it would be more idiomatic to useDeferredValue.
---
 .../src/__tests__/inspectedElement-test.js    | 11 +++++-----
 .../devtools/views/Components/Components.js   | 21 ++++---------------
 .../Components/InspectedElementContext.js     |  6 ++++--
 .../InspectedElementErrorBoundary.js          |  4 ++--
 4 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index ba6bd0ad092af..ee6c4431b9526 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -117,12 +117,11 @@ describe('InspectedElement', () => {
         <SettingsContextController>
           <TreeContextController
             defaultSelectedElementID={defaultSelectedElementID}
-            defaultSelectedElementIndex={defaultSelectedElementIndex}>
-            <React.Suspense fallback="Loading...">
-              <InspectedElementContextController>
-                {children}
-              </InspectedElementContextController>
-            </React.Suspense>
+            defaultSelectedElementIndex={defaultSelectedElementIndex}
+            defaultInspectedElementID={defaultSelectedElementID}>
+            <InspectedElementContextController>
+              {children}
+            </InspectedElementContextController>
           </TreeContextController>
         </SettingsContextController>
       </StoreContext.Provider>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 1575ab242c2ce..f0b309d3f1a2a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -8,14 +8,7 @@
  */
 
 import * as React from 'react';
-import {
-  Fragment,
-  Suspense,
-  useEffect,
-  useLayoutEffect,
-  useReducer,
-  useRef,
-} from 'react';
+import {Fragment, useEffect, useLayoutEffect, useReducer, useRef} from 'react';
 import Tree from './Tree';
 import {OwnersListContextController} from './OwnersListContext';
 import portaledContent from '../portaledContent';
@@ -169,11 +162,9 @@ function Components(_: {}) {
             <div className={styles.InspectedElementWrapper}>
               <NativeStyleContextController>
                 <InspectedElementErrorBoundary>
-                  <Suspense fallback={<Loading />}>
-                    <InspectedElementContextController>
-                      <InspectedElement />
-                    </InspectedElementContextController>
-                  </Suspense>
+                  <InspectedElementContextController>
+                    <InspectedElement />
+                  </InspectedElementContextController>
                 </InspectedElementErrorBoundary>
               </NativeStyleContextController>
             </div>
@@ -186,10 +177,6 @@ function Components(_: {}) {
   );
 }
 
-function Loading() {
-  return <div className={styles.Loading}>Loading...</div>;
-}
-
 const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer';
 const VERTICAL_MODE_MAX_WIDTH = 600;
 const MINIMUM_SIZE = 50;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 0e198fc5b7999..f6549fc243e49 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -66,7 +66,7 @@ export type Props = {
 export function InspectedElementContextController({
   children,
 }: Props): React.Node {
-  const {selectedElementID} = useContext(TreeStateContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
   const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
@@ -93,7 +93,9 @@ export function InspectedElementContextController({
   });
 
   const element =
-    selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
+    inspectedElementID !== null
+      ? store.getElementByID(inspectedElementID)
+      : null;
 
   const alreadyLoadedHookNames =
     element != null && hasAlreadyLoadedHookNames(element);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index c070662f05ff5..9a5612ad8c91d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -27,7 +27,7 @@ export default function InspectedElementErrorBoundaryWrapper({
 }: WrapperProps): React.Node {
   // Key on the selected element ID so that changing the selected element automatically hides the boundary.
   // This seems best since an error inspecting one element isn't likely to be relevant to another element.
-  const {selectedElementID} = useContext(TreeStateContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
 
   const refresh = useCacheRefresh();
   const handleDsmiss = useCallback(() => {
@@ -37,7 +37,7 @@ export default function InspectedElementErrorBoundaryWrapper({
   return (
     <div className={styles.Wrapper}>
       <ErrorBoundary
-        key={selectedElementID}
+        key={inspectedElementID}
         canDismiss={true}
         onBeforeDismissCallback={handleDsmiss}>
         {children}