From f89ed71ddf5f8cab28b202cfdc04927c683ad3cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 2 Oct 2025 17:06:52 -0400
Subject: [PATCH] [DevTools] Track whether to auto select when new timeline
 entries come on (#34698)

This auto updates to select the last entry in the timeline until we make
the first selection. That way when new content loads in, we show the
last timeline of what is visible.
---
 .../views/SuspenseTab/SuspenseTreeContext.js        | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
index bfe3f42bda..60235e09f3 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -30,6 +30,7 @@ export type SuspenseTreeState = {
   hoveredTimelineIndex: number | -1,
   uniqueSuspendersOnly: boolean,
   playing: boolean,
+  autoSelect: boolean,
 };
 
 type ACTION_SUSPENSE_TREE_MUTATION = {
@@ -123,6 +124,7 @@ function getInitialState(store: Store): SuspenseTreeState {
     hoveredTimelineIndex: -1,
     uniqueSuspendersOnly,
     playing: false,
+    autoSelect: true,
   };
 
   return initialState;
@@ -181,7 +183,10 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               selectedTimelineID === null || nextTimeline.length === 0
                 ? -1
                 : nextTimeline.indexOf(selectedTimelineID);
-            if (nextTimeline.length > 0 && nextTimelineIndex === -1) {
+            if (
+              nextTimeline.length > 0 &&
+              (nextTimelineIndex === -1 || state.autoSelect)
+            ) {
               nextTimelineIndex = nextTimeline.length - 1;
               selectedSuspenseID = nextTimeline[nextTimelineIndex];
             }
@@ -212,6 +217,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               ...state,
               selectedSuspenseID,
               playing: false, // pause
+              autoSelect: false,
             };
           }
           case 'SET_SUSPENSE_LINEAGE': {
@@ -223,6 +229,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               lineage,
               selectedSuspenseID: suspenseID,
               playing: false, // pause
+              autoSelect: false,
             };
           }
           case 'SET_SUSPENSE_TIMELINE': {
@@ -277,6 +284,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               selectedSuspenseID: nextSelectedSuspenseID,
               timelineIndex: nextTimelineIndex,
               playing: false, // pause
+              autoSelect: false,
             };
           }
           case 'SUSPENSE_SKIP_TIMELINE_INDEX': {
@@ -299,6 +307,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               selectedSuspenseID: nextSelectedSuspenseID,
               timelineIndex: nextTimelineIndex,
               playing: false, // pause
+              autoSelect: false,
             };
           }
           case 'SUSPENSE_PLAY_PAUSE': {
@@ -325,6 +334,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               selectedSuspenseID: nextSelectedSuspenseID,
               timelineIndex: nextTimelineIndex,
               playing: mode === 'toggle' ? !state.playing : mode === 'play',
+              autoSelect: false,
             };
           }
           case 'SUSPENSE_PLAY_TICK': {
@@ -381,6 +391,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               selectedSuspenseID: nextSelectedSuspenseID,
               timelineIndex: nextTimelineIndex,
               playing: false, // pause
+              autoSelect: false,
             };
           }
           case 'HOVER_TIMELINE_FOR_ID': {