{"patch":"diff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex f190f2704d..12e2ce31fb 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -88,6 +88,7 @@ import {\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n SUSPENSE_TREE_OPERATION_RESIZE,\n+ SUSPENSE_TREE_OPERATION_SUSPENDERS,\n UNKNOWN_SUSPENDERS_NONE,\n UNKNOWN_SUSPENDERS_REASON_PRODUCTION,\n UNKNOWN_SUSPENDERS_REASON_OLD_VERSION,\n@@ -2016,6 +2017,7 @@ export function attach(\n const pendingOperations: OperationsArray = [];\n const pendingRealUnmountedIDs: Array = [];\n const pendingRealUnmountedSuspenseIDs: Array = [];\n+ const pendingSuspenderChanges: Set = new Set();\n let pendingOperationsQueue: Array | null = [];\n const pendingStringTable: Map = new Map();\n let pendingStringTableLength: number = 0;\n@@ -2047,6 +2049,7 @@ export function attach(\n pendingOperations.length === 0 &&\n pendingRealUnmountedIDs.length === 0 &&\n pendingRealUnmountedSuspenseIDs.length === 0 &&\n+ pendingSuspenderChanges.size === 0 &&\n pendingUnmountedRootID === null\n );\n }\n@@ -2113,6 +2116,7 @@ export function attach(\n pendingRealUnmountedIDs.length +\n (pendingUnmountedRootID === null ? 0 : 1);\n const numUnmountSuspenseIDs = pendingRealUnmountedSuspenseIDs.length;\n+ const numSuspenderChanges = pendingSuspenderChanges.size;\n \n const operations = new Array(\n \/\/ Identify which renderer this update is coming from.\n@@ -2128,7 +2132,10 @@ export function attach(\n \/\/ [TREE_OPERATION_REMOVE, removedIDLength, ...ids]\n (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +\n \/\/ Regular operations\n- pendingOperations.length,\n+ pendingOperations.length +\n+ \/\/ All suspender changes are batched in a single message.\n+ \/\/ [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders]]\n+ (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 2 : 0),\n );\n \n \/\/ Identify which renderer this update is coming from.\n@@ -2191,12 +2198,31 @@ export function attach(\n i++;\n }\n }\n- \/\/ Fill in the rest of the operations.\n+\n+ \/\/ Fill in pending operations.\n for (let j = 0; j < pendingOperations.length; j++) {\n operations[i + j] = pendingOperations[j];\n }\n i += pendingOperations.length;\n \n+ \/\/ Suspender changes might affect newly mounted nodes that we already recorded\n+ \/\/ in pending operations.\n+ if (numSuspenderChanges > 0) {\n+ operations[i++] = SUSPENSE_TREE_OPERATION_SUSPENDERS;\n+ operations[i++] = numSuspenderChanges;\n+ pendingSuspenderChanges.forEach(fiberIdWithChanges => {\n+ const suspense = idToSuspenseNodeMap.get(fiberIdWithChanges);\n+ if (suspense === undefined) {\n+ \/\/ Probably forgot to cleanup pendingSuspenderChanges when this node was removed.\n+ throw new Error(\n+ `Could not send suspender changes for \"${fiberIdWithChanges}\" since the Fiber no longer exists.`,\n+ );\n+ }\n+ operations[i++] = fiberIdWithChanges;\n+ operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0;\n+ });\n+ }\n+\n \/\/ Let the frontend know about tree operations.\n flushOrQueueOperations(operations);\n \n@@ -2204,6 +2230,7 @@ export function attach(\n pendingOperations.length = 0;\n pendingRealUnmountedIDs.length = 0;\n pendingRealUnmountedSuspenseIDs.length = 0;\n+ pendingSuspenderChanges.clear();\n pendingUnmountedRootID = null;\n pendingStringTable.clear();\n pendingStringTableLength = 0;\n@@ -2688,6 +2715,19 @@ export function attach(\n }\n }\n \n+ function recordSuspenseSuspenders(suspenseNode: SuspenseNode): void {\n+ if (__DEBUG__) {\n+ console.log('recordSuspenseSuspenders()', suspenseNode);\n+ }\n+ const fiberInstance = suspenseNode.instance;\n+ if (fiberInstance.kind !== FIBER_INSTANCE) {\n+ \/\/ TODO: Suspender updates of filtered Suspense nodes are currently dropped.\n+ return;\n+ }\n+\n+ pendingSuspenderChanges.add(fiberInstance.id);\n+ }\n+\n function recordSuspenseUnmount(suspenseInstance: SuspenseNode): void {\n if (__DEBUG__) {\n console.log(\n@@ -2709,6 +2749,7 @@ export function attach(\n \/\/ and later arrange them in the correct order.\n pendingRealUnmountedSuspenseIDs.push(id);\n \n+ pendingSuspenderChanges.delete(id);\n idToSuspenseNodeMap.delete(id);\n }\n \n@@ -2779,6 +2820,7 @@ export function attach(\n ) {\n \/\/ This didn't exist in the parent before, so let's mark this boundary as having a unique suspender.\n parentSuspenseNode.hasUniqueSuspenders = true;\n+ recordSuspenseSuspenders(parentSuspenseNode);\n }\n }\n \/\/ We have observed at least one known reason this might have been suspended.\n@@ -2820,6 +2862,9 @@ export function attach(\n \/\/ We have found a child boundary that depended on the unblocked I\/O.\n \/\/ It can now be marked as having unique suspenders. We can skip its children\n \/\/ since they'll still be blocked by this one.\n+ if (!node.hasUniqueSuspenders) {\n+ recordSuspenseSuspenders(node);\n+ }\n node.hasUniqueSuspenders = true;\n node.hasUnknownSuspenders = false;\n } else if (node.firstChild !== null) {\n@@ -3522,6 +3567,9 @@ export function attach(\n \/\/ Unfortunately if we don't have any DEV time debug info or debug thenables then\n \/\/ we have no meta data to show. However, we still mark this Suspense boundary as\n \/\/ participating in the loading sequence since apparently it can suspend.\n+ if (!suspenseNode.hasUniqueSuspenders) {\n+ recordSuspenseSuspenders(suspenseNode);\n+ }\n suspenseNode.hasUniqueSuspenders = true;\n \/\/ We have not seen any reason yet for why this suspense node might have been\n \/\/ suspended but it clearly has been at some point. If we later discover a reason\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex 8071d3d4a2..1a8ef8caa8 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -28,6 +28,7 @@ export const SUSPENSE_TREE_OPERATION_ADD = 8;\n export const SUSPENSE_TREE_OPERATION_REMOVE = 9;\n export const SUSPENSE_TREE_OPERATION_REORDER_CHILDREN = 10;\n export const SUSPENSE_TREE_OPERATION_RESIZE = 11;\n+export const SUSPENSE_TREE_OPERATION_SUSPENDERS = 12;\n \n export const PROFILING_FLAG_BASIC_SUPPORT = 0b01;\n export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 0a9c84717f..bb540f09da 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -24,6 +24,7 @@ import {\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n SUSPENSE_TREE_OPERATION_RESIZE,\n+ SUSPENSE_TREE_OPERATION_SUSPENDERS,\n } from '..\/constants';\n import {ElementTypeRoot} from '..\/frontend\/types';\n import {\n@@ -879,8 +880,13 @@ export default class Store extends EventEmitter<{\n return null;\n }\n \n+ \/**\n+ * @param rootID\n+ * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders\n+ *\/\n getSuspendableDocumentOrderSuspense(\n rootID: Element['id'] | void,\n+ uniqueSuspendersOnly: boolean,\n ): $ReadOnlyArray {\n if (rootID === undefined) {\n return [];\n@@ -892,7 +898,7 @@ export default class Store extends EventEmitter<{\n if (!this.supportsTogglingSuspense(root.id)) {\n return [];\n }\n- const suspenseTreeList: SuspenseNode['id'][] = [];\n+ const list: SuspenseNode['id'][] = [];\n const suspense = this.getSuspenseByID(root.id);\n if (suspense !== null) {\n const stack = [suspense];\n@@ -901,9 +907,11 @@ export default class Store extends EventEmitter<{\n if (current === undefined) {\n continue;\n }\n- \/\/ Include the root even if we won't suspend it.\n+ \/\/ Include the root even if we won't show it suspended (because that's just blank).\n \/\/ You should be able to see what suspended the shell.\n- suspenseTreeList.push(current.id);\n+ if (!uniqueSuspendersOnly || current.hasUniqueSuspenders) {\n+ list.push(current.id);\n+ }\n \/\/ Add children in reverse order to maintain document order\n for (let j = current.children.length - 1; j >= 0; j--) {\n const childSuspense = this.getSuspenseByID(current.children[j]);\n@@ -914,7 +922,7 @@ export default class Store extends EventEmitter<{\n }\n }\n \n- return suspenseTreeList;\n+ return list;\n }\n \n getRendererIDForElement(id: number): number | null {\n@@ -1580,6 +1588,7 @@ export default class Store extends EventEmitter<{\n children: [],\n name,\n rects,\n+ hasUniqueSuspenders: false,\n });\n \n hasSuspenseTreeChanged = true;\n@@ -1749,6 +1758,42 @@ export default class Store extends EventEmitter<{\n \n break;\n }\n+ case SUSPENSE_TREE_OPERATION_SUSPENDERS: {\n+ const changeLength = operations[i + 1];\n+ i += 2;\n+\n+ for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {\n+ const id = operations[i];\n+ const hasUniqueSuspenders = operations[i + 1] === 1;\n+ const suspense = this._idToSuspense.get(id);\n+\n+ if (suspense === undefined) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot update suspenders of suspense node \"${id}\" because no matching node was found in the Store.`,\n+ ),\n+ );\n+\n+ break;\n+ }\n+\n+ i += 2;\n+\n+ if (__DEBUG__) {\n+ const previousHasUniqueSuspenders = suspense.hasUniqueSuspenders;\n+ debug(\n+ 'Suspender changes',\n+ `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} (was ${String(previousHasUniqueSuspenders)})`,\n+ );\n+ }\n+\n+ suspense.hasUniqueSuspenders = hasUniqueSuspenders;\n+ }\n+\n+ hasSuspenseTreeChanged = true;\n+\n+ break;\n+ }\n default:\n this._throwAndEmitError(\n new UnsupportedBridgeOperationError(\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js\nindex 454497e6b0..a94766d4f1 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js\n@@ -52,7 +52,7 @@ type Props = {\n type: IconType,\n };\n \n-const materialIconsViewBox = '0 -960 960 960';\n+const panelIcons = '0 -960 960 820';\n export default function ButtonIcon({className = '', type}: Props): React.Node {\n let pathData = null;\n let viewBox = '0 0 24 24';\n@@ -131,27 +131,27 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {\n break;\n case 'panel-left-close':\n pathData = PATH_MATERIAL_PANEL_LEFT_CLOSE;\n- viewBox = materialIconsViewBox;\n+ viewBox = panelIcons;\n break;\n case 'panel-left-open':\n pathData = PATH_MATERIAL_PANEL_LEFT_OPEN;\n- viewBox = materialIconsViewBox;\n+ viewBox = panelIcons;\n break;\n case 'panel-right-close':\n pathData = PATH_MATERIAL_PANEL_RIGHT_CLOSE;\n- viewBox = materialIconsViewBox;\n+ viewBox = panelIcons;\n break;\n case 'panel-right-open':\n pathData = PATH_MATERIAL_PANEL_RIGHT_OPEN;\n- viewBox = materialIconsViewBox;\n+ viewBox = panelIcons;\n break;\n case 'panel-bottom-open':\n pathData = PATH_MATERIAL_PANEL_BOTTOM_OPEN;\n- viewBox = materialIconsViewBox;\n+ viewBox = panelIcons;\n break;\n case 'panel-bottom-close':\n pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;\n- viewBox = materialIconsViewBox;\n+ viewBox = panelIcons;\n break;\n case 'suspend':\n pathData = PATH_SUSPEND;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 4b4e721ced..5637967a6a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -20,6 +20,7 @@ import {\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n SUSPENSE_TREE_OPERATION_RESIZE,\n+ SUSPENSE_TREE_OPERATION_SUSPENDERS,\n } from 'react-devtools-shared\/src\/constants';\n import {\n parseElementDisplayNameFromBackend,\n@@ -452,6 +453,18 @@ function updateTree(\n break;\n }\n \n+ case SUSPENSE_TREE_OPERATION_SUSPENDERS: {\n+ const changesLength = ((operations[i + 1]: any): number);\n+\n+ if (__DEBUG__) {\n+ const changes = operations.slice(i + 2, i + 2 + changesLength * 2);\n+ debug('Suspender changes', `[${changes.join(',')}]`);\n+ }\n+\n+ i += 2 + changesLength * 2;\n+ break;\n+ }\n+\n default:\n throw Error(`Unsupported Bridge operation \"${operation}\"`);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css\nindex 6404c32627..33441bcf34 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css\n@@ -3,6 +3,7 @@\n display: flex;\n flex-direction: row;\n padding: 0.25rem;\n+ align-items: center;\n }\n \n .SuspenseTimelineInput {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js\nindex 65f83d72bd..dd58703cb9 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js\n@@ -11,6 +11,7 @@ import * as React from 'react';\n import {useContext, useLayoutEffect, useRef} from 'react';\n import {BridgeContext, StoreContext} from '..\/context';\n import {TreeDispatcherContext} from '..\/Components\/TreeContext';\n+import Tooltip from '..\/Components\/reach-ui\/tooltip';\n import {useHighlightHostInstance} from '..\/hooks';\n import {\n SuspenseTreeDispatcherContext,\n@@ -34,8 +35,26 @@ function SuspenseTimelineInput() {\n selectedRootID: rootID,\n timeline,\n timelineIndex,\n+ uniqueSuspendersOnly,\n } = useContext(SuspenseTreeStateContext);\n \n+ function handleToggleUniqueSuspenders(event: SyntheticEvent) {\n+ const nextUniqueSuspendersOnly = (event.currentTarget as HTMLInputElement)\n+ .checked;\n+ const nextTimeline =\n+ rootID === null\n+ ? []\n+ : \/\/ TODO: Handle different timeline modes (e.g. random order)\n+ store.getSuspendableDocumentOrderSuspense(\n+ rootID,\n+ nextUniqueSuspendersOnly,\n+ );\n+ suspenseTreeDispatch({\n+ type: 'SET_SUSPENSE_TIMELINE',\n+ payload: [nextTimeline, null, nextUniqueSuspendersOnly],\n+ });\n+ }\n+\n const inputRef = useRef(null);\n const inputBBox = useRef(null);\n useLayoutEffect(() => {\n@@ -155,9 +174,7 @@ function SuspenseTimelineInput() {\n \n return (\n <>\n-

\n- {timelineIndex}\/{max}\n- <\/div>\n+ {timelineIndex}\/{max}\n

\n \n <\/div>\n+ \n+ \n+ <\/Tooltip>\n <\/>\n );\n }\n \n export default function SuspenseTimeline(): React$Node {\n const store = useContext(StoreContext);\n- const {roots, selectedRootID} = useContext(SuspenseTreeStateContext);\n+ const {roots, selectedRootID, uniqueSuspendersOnly} = useContext(\n+ SuspenseTreeStateContext,\n+ );\n const treeDispatch = useContext(TreeDispatcherContext);\n const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);\n \n function handleChange(event: SyntheticEvent) {\n const newRootID = +event.currentTarget.value;\n \/\/ TODO: scrollIntoView both suspense rects and host instance.\n- const nextTimeline = store.getSuspendableDocumentOrderSuspense(newRootID);\n+ const nextTimeline = store.getSuspendableDocumentOrderSuspense(\n+ newRootID,\n+ uniqueSuspendersOnly,\n+ );\n suspenseTreeDispatch({\n type: 'SET_SUSPENSE_TIMELINE',\n- payload: [nextTimeline, newRootID],\n+ payload: [nextTimeline, newRootID, uniqueSuspendersOnly],\n });\n if (nextTimeline.length > 0) {\n const milestone = nextTimeline[nextTimeline.length - 1];\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js\nindex 9d55b3f76c..3f0c5fd41a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js\n@@ -31,6 +31,7 @@ export type SuspenseTreeState = {\n selectedSuspenseID: SuspenseNode['id'] | null,\n timeline: $ReadOnlyArray,\n timelineIndex: number | -1,\n+ uniqueSuspendersOnly: boolean,\n };\n \n type ACTION_SUSPENSE_TREE_MUTATION = {\n@@ -51,6 +52,8 @@ type ACTION_SET_SUSPENSE_TIMELINE = {\n $ReadOnlyArray,\n \/\/ The next Suspense ID to select in the timeline\n SuspenseNode['id'] | null,\n+ \/\/ Whether this timeline includes only unique suspenders\n+ boolean,\n ],\n };\n type ACTION_SUSPENSE_SET_TIMELINE_INDEX = {\n@@ -92,6 +95,7 @@ function getDefaultRootID(store: Store): Element['id'] | null {\n \n function getInitialState(store: Store): SuspenseTreeState {\n let initialState: SuspenseTreeState;\n+ const uniqueSuspendersOnly = true;\n const selectedRootID = getDefaultRootID(store);\n \/\/ TODO: Default to nearest from inspected\n if (selectedRootID === null) {\n@@ -102,9 +106,13 @@ function getInitialState(store: Store): SuspenseTreeState {\n selectedRootID,\n timeline: [],\n timelineIndex: -1,\n+ uniqueSuspendersOnly,\n };\n } else {\n- const timeline = store.getSuspendableDocumentOrderSuspense(selectedRootID);\n+ const timeline = store.getSuspendableDocumentOrderSuspense(\n+ selectedRootID,\n+ uniqueSuspendersOnly,\n+ );\n const timelineIndex = timeline.length - 1;\n const selectedSuspenseID =\n timelineIndex === -1 ? null : timeline[timelineIndex];\n@@ -119,6 +127,7 @@ function getInitialState(store: Store): SuspenseTreeState {\n selectedRootID,\n timeline,\n timelineIndex,\n+ uniqueSuspendersOnly,\n };\n }\n \n@@ -182,7 +191,10 @@ function SuspenseTreeContextController({children}: Props): React.Node {\n nextRootID === null\n ? []\n : \/\/ TODO: Handle different timeline modes (e.g. random order)\n- store.getSuspendableDocumentOrderSuspense(nextRootID);\n+ store.getSuspendableDocumentOrderSuspense(\n+ nextRootID,\n+ state.uniqueSuspendersOnly,\n+ );\n \n let nextTimelineIndex =\n selectedTimelineID === null || nextTimeline.length === 0\n@@ -242,6 +254,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {\n const previousTimeline = state.timeline;\n const nextTimeline = action.payload[0];\n const nextRootID: SuspenseNode['id'] | null = action.payload[1];\n+ const nextUniqueSuspendersOnly = action.payload[2];\n let nextLineage = state.lineage;\n let nextMilestoneIndex: number | -1 = -1;\n let nextSelectedSuspenseID = state.selectedSuspenseID;\n@@ -255,8 +268,10 @@ function SuspenseTreeContextController({children}: Props): React.Node {\n const previousMilestoneID =\n previousTimeline[previousMilestoneIndex];\n nextMilestoneIndex = nextTimeline.indexOf(previousMilestoneID);\n- if (nextMilestoneIndex === -1) {\n+ if (nextMilestoneIndex === -1 && nextTimeline.length > 0) {\n nextMilestoneIndex = nextTimeline.length - 1;\n+ nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex];\n+ nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);\n }\n } else if (nextRootID !== null) {\n nextMilestoneIndex = nextTimeline.length - 1;\n@@ -272,6 +287,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {\n nextRootID === null ? state.selectedRootID : nextRootID,\n timeline: nextTimeline,\n timelineIndex: nextMilestoneIndex,\n+ uniqueSuspendersOnly: nextUniqueSuspendersOnly,\n };\n }\n case 'SUSPENSE_SET_TIMELINE_INDEX': {\ndiff --git a\/packages\/react-devtools-shared\/src\/frontend\/types.js b\/packages\/react-devtools-shared\/src\/frontend\/types.js\nindex 8e6a3394f9..7762af43e0 100644\n--- a\/packages\/react-devtools-shared\/src\/frontend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/frontend\/types.js\n@@ -199,6 +199,7 @@ export type SuspenseNode = {\n children: Array,\n name: string | null,\n rects: null | Array,\n+ hasUniqueSuspenders: boolean,\n };\n \n \/\/ Serialized version of ReactIOInfo\ndiff --git a\/packages\/react-devtools-shared\/src\/utils.js b\/packages\/react-devtools-shared\/src\/utils.js\nindex b404608e55..7e256febea 100644\n--- a\/packages\/react-devtools-shared\/src\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/utils.js\n@@ -44,6 +44,7 @@ import {\n SUSPENSE_TREE_OPERATION_REMOVE,\n SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n SUSPENSE_TREE_OPERATION_RESIZE,\n+ SUSPENSE_TREE_OPERATION_SUSPENDERS,\n } from '.\/constants';\n import {\n ComponentFilterElementType,\n@@ -424,6 +425,16 @@ export function printOperationsArray(operations: Array) {\n \n break;\n }\n+ case SUSPENSE_TREE_OPERATION_SUSPENDERS: {\n+ const changeLength = operations[i + 1];\n+ i += 2;\n+ const changes = operations.slice(i, i + changeLength * 2);\n+ i += changeLength;\n+\n+ logs.push(`Suspense node suspender changes ${changes.join(',')}`);\n+\n+ break;\n+ }\n default:\n throw Error(`Unsupported Bridge operation \"${operation}\"`);\n }\n","commit":{"authorName":"Sebastian \"Sebbie\" Silbermann","authorEmail":"sebastian.silbermann@vercel.com","authoredAt":"2025-09-11T11:33:05+02:00","revision":"b1c519f3d40932c126523dcad745ed9e06ddd636","shortRevision":"b1c519f3d4","subject":"[DevTools] Only show boundaries with unique suspenders by default in the timeline (#34397)"},"parents":["8c1501452cea0d3779a2b9e7a5e4dd5348427b8a"],"files":[{"path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/constants.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/store.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/frontend\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/utils.js","status":"M"}],"body":""}

dillon1000/react

Files changed