+ label={
+ index === min
+ ? // The first step in the timeline is always a Transition (Initial Paint).
+ // TODO: Support multiple environments.
+ 'Initial Paint'
+ : // TODO: Consider adding the name of this specific boundary if this step has only one.
+ 'Suspense'
+ }>
-
+ ,
);
}
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 b4ed7ec1f93c8..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,13 +34,13 @@ import {
SuspenseTreeStateContext,
} from './SuspenseTreeContext';
import {StoreContext, OptionsContext} from '../context';
-import {TreeDispatcherContext} from '../Components/TreeContext';
+import {
+ TreeDispatcherContext,
+ TreeStateContext,
+} from '../Components/TreeContext';
import Button from '../Button';
import Toggle from '../Toggle';
-import typeof {
- SyntheticEvent,
- SyntheticPointerEvent,
-} from 'react-dom-bindings/src/events/SyntheticEvent';
+import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
@@ -71,20 +71,14 @@ function ToggleUniqueSuspenders() {
const store = useContext(StoreContext);
const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
- const {selectedRootID: rootID, uniqueSuspendersOnly} = useContext(
- SuspenseTreeStateContext,
- );
+ const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext);
function handleToggleUniqueSuspenders() {
const nextUniqueSuspendersOnly = !uniqueSuspendersOnly;
- const nextTimeline =
- rootID === null
- ? []
- : // TODO: Handle different timeline modes (e.g. random order)
- store.getSuspendableDocumentOrderSuspense(
- rootID,
- nextUniqueSuspendersOnly,
- );
+ // TODO: Handle different timeline modes (e.g. random order)
+ const nextTimeline = store.getSuspendableDocumentOrderSuspense(
+ nextUniqueSuspendersOnly,
+ );
suspenseTreeDispatch({
type: 'SET_SUSPENSE_TIMELINE',
payload: [nextTimeline, null, nextUniqueSuspendersOnly],
@@ -101,55 +95,6 @@ function ToggleUniqueSuspenders() {
);
}
-function SelectRoot() {
- const store = useContext(StoreContext);
- const {roots, selectedRootID, uniqueSuspendersOnly} = useContext(
- SuspenseTreeStateContext,
- );
- const treeDispatch = useContext(TreeDispatcherContext);
- const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
-
- function handleChange(event: SyntheticEvent) {
- const newRootID = +event.currentTarget.value;
- // TODO: scrollIntoView both suspense rects and host instance.
- const nextTimeline = store.getSuspendableDocumentOrderSuspense(
- newRootID,
- uniqueSuspendersOnly,
- );
- suspenseTreeDispatch({
- type: 'SET_SUSPENSE_TIMELINE',
- payload: [nextTimeline, newRootID, uniqueSuspendersOnly],
- });
- if (nextTimeline.length > 0) {
- const milestone = nextTimeline[nextTimeline.length - 1];
- treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone});
- }
- }
- return (
- roots.length > 0 && (
-
- )
- );
-}
-
function ToggleTreeList({
dispatch,
state,
@@ -240,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;
@@ -427,7 +384,6 @@ function SuspenseTab(_: {}) {
-
{!hideSettings && }
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index b7340da915b9b..30ca21476f2b6 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -9,7 +9,7 @@
import * as React from 'react';
import {useContext, useEffect, useRef} from 'react';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext} from '../context';
import {TreeDispatcherContext} from '../Components/TreeContext';
import {useHighlightHostInstance, useScrollToHostInstance} from '../hooks';
import {
@@ -23,20 +23,15 @@ import ButtonIcon from '../ButtonIcon';
function SuspenseTimelineInput() {
const bridge = useContext(BridgeContext);
- const store = useContext(StoreContext);
const treeDispatch = useContext(TreeDispatcherContext);
const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
const {highlightHostInstance, clearHighlightHostInstance} =
useHighlightHostInstance();
const scrollToHostInstance = useScrollToHostInstance();
- const {
- selectedRootID: rootID,
- timeline,
- timelineIndex,
- hoveredTimelineIndex,
- playing,
- } = useContext(SuspenseTreeStateContext);
+ const {timeline, timelineIndex, hoveredTimelineIndex, playing} = useContext(
+ SuspenseTreeStateContext,
+ );
const min = 0;
const max = timeline.length > 0 ? timeline.length - 1 : 0;
@@ -112,24 +107,12 @@ function SuspenseTimelineInput() {
// For now we just exclude it from deps since we don't lint those anyway.
function changeTimelineIndex(newIndex: number) {
// Synchronize timeline index with what is resuspended.
- if (rootID === null) {
- return;
- }
- const rendererID = store.getRendererIDForElement(rootID);
- if (rendererID === null) {
- console.error(
- `No renderer ID found for root element ${rootID} in suspense timeline.`,
- );
- return;
- }
// We suspend everything after the current selection. The root isn't showing
// anything suspended in the root. The step after that should have one less
// thing suspended. I.e. the first suspense boundary should be unsuspended
// when it's selected. This also lets you show everything in the last step.
const suspendedSet = timeline.slice(timelineIndex + 1);
bridge.send('overrideSuspenseMilestone', {
- rendererID,
- rootID,
suspendedSet,
});
if (isInitialMount.current) {
@@ -164,20 +147,6 @@ function SuspenseTimelineInput() {
};
}, [playing]);
- if (rootID === null) {
- return (
-