[DevTools] Remove markers from Suspense timeline (#34357)
Sebastian "Sebbie" Silbermann committed
Sep 2, 2025 at 14:59 UTC
8e60cb7ed55a3dce35bd809b4cf1ad803c59abfd
2 files changed
+24
-68
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
+3
-17
@@ -2,7 +2,7 @@
2
width: 100%;
3
display: flex;
4
flex-direction: row;
5
- padding: 0 0.25rem;
5
+ padding: 0.25rem;
6
}
7
8
.SuspenseTimelineInput {
@@ -21,20 +21,6 @@
21
max-width: 3rem;
22
}
23
24
-.SuspenseTimelineMarkers {
25
- display: flex;
26
- flex-direction: row;
27
- justify-content: space-between;
28
-}
29
-
30
-.SuspenseTimelineMarkers > * {
31
- flex: 1 1 0;
32
- overflow: visible;
33
- visibility: hidden;
34
- width: 0
24
+.SuspenseTimelineProgressIndicator {
25
+ align-self: center;
26
}
36
-
37
-.SuspenseTimelineActiveMarker {
38
- visibility: visible;
39
-}
40
-
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+21
-51
@@ -11,14 +11,7 @@ import type {Element, SuspenseNode} from '../../../frontend/types';
11
import type Store from '../../store';
12
13
import * as React from 'react';
14
-import {
15
- useContext,
16
- useId,
17
- useLayoutEffect,
18
- useMemo,
19
- useRef,
20
- useState,
21
-} from 'react';
14
+import {useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
15
import {BridgeContext, StoreContext} from '../context';
16
import {TreeDispatcherContext} from '../Components/TreeContext';
17
import {useHighlightHostInstance} from '../hooks';
@@ -112,30 +105,6 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
105
setValue(max);
106
}
107
115
- const markersID = useId();
116
- const markers: React.Node[] = useMemo(() => {
117
- return timeline.map((suspense, index) => {
118
- const takesUpSpace =
119
- suspense.rects !== null &&
120
- suspense.rects.some(rect => {
121
- return rect.width > 0 && rect.height > 0;
122
- });
123
-
124
- return takesUpSpace ? (
125
- <option
126
- key={suspense.id}
127
- className={
128
- index === value ? styles.SuspenseTimelineActiveMarker : undefined
129
- }
130
- value={index}>
131
- #{index + 1}
132
- </option>
133
- ) : (
134
- <option key={suspense.id} />
135
- );
136
- });
137
- }, [timeline, value]);
138
-
108
if (rootID === undefined) {
109
return <div className={styles.SuspenseTimelineInput}>Root not found.</div>;
110
}
@@ -219,25 +188,26 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
188
}
189
190
return (
222
- <div className={styles.SuspenseTimelineInput}>
223
- <input
224
- className={styles.SuspenseTimelineSlider}
225
- type="range"
226
- min={min}
227
- max={max}
228
- list={markersID}
229
- value={value}
230
- onBlur={handleBlur}
231
- onChange={handleChange}
232
- onFocus={handleFocus}
233
- onPointerMove={handlePointerMove}
234
- onPointerUp={clearHighlightHostInstance}
235
- ref={inputRef}
236
- />
237
- <datalist id={markersID} className={styles.SuspenseTimelineMarkers}>
238
- {markers}
239
- </datalist>
240
- </div>
191
+ <>
192
+ <div>
193
+ {value}/{max}
194
+ </div>
195
+ <div className={styles.SuspenseTimelineInput}>
196
+ <input
197
+ className={styles.SuspenseTimelineSlider}
198
+ type="range"
199
+ min={min}
200
+ max={max}
201
+ value={value}
202
+ onBlur={handleBlur}
203
+ onChange={handleChange}
204
+ onFocus={handleFocus}
205
+ onPointerMove={handlePointerMove}
206
+ onPointerUp={clearHighlightHostInstance}
207
+ ref={inputRef}
208
+ />
209
+ </div>
210
+ </>
211
);
212
}
213