diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index f7b63fa2c62c2..f698f0ae16549 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -34,6 +34,10 @@ import { SuspenseTreeStateContext, } from './SuspenseTreeContext'; import {StoreContext, OptionsContext} from '../context'; +import { + TreeDispatcherContext, + TreeStateContext, +} from '../Components/TreeContext'; import Button from '../Button'; import Toggle from '../Toggle'; import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; @@ -181,6 +185,18 @@ function SuspenseTab(_: {}) { treeListHorizontalFraction, } = state; + const {inspectedElementID} = useContext(TreeStateContext); + const {timeline} = useContext(SuspenseTreeStateContext); + const treeDispatch = useContext(TreeDispatcherContext); + useLayoutEffect(() => { + // If the inspected element is still null and we've loaded a timeline, we can set the initial selection. + // TODO: This tab should use its own source of truth instead so we only show suspense boundaries. + if (inspectedElementID === null && timeline.length > 0) { + const milestone = timeline[timeline.length - 1]; + treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone}); + } + }, [timeline, inspectedElementID]); + useLayoutEffect(() => { const wrapperElement = wrapperTreeRef.current;