[DevTools] Sort "Suspended By" view by the start time (#34105)
or end time if they have the same start time. <img width="517" height="411" alt="Screenshot 2025-08-04 at 4 00 23 PM" src="https://github.com/user-attachments/assets/b99be67b-5727-4e24-98c0-ee064fb21e2f" /> They would typically appear in this order naturally but not always. Especially in Suspense boundaries where the order can also be depended on when the components are discovered.
Sebastian Markbåge committed
Aug 6, 2025 at 11:23 UTC
66f09bd0540d0a094b80c94d013df885903c97da
1 file changed
+13
-1
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
+13
-1
@@ -228,6 +228,15 @@ type Props = {
228
store: Store,
229
};
230
231
+function compareTime(a: SerializedAsyncInfo, b: SerializedAsyncInfo): number {
232
+ const ioA = a.awaited;
233
+ const ioB = b.awaited;
234
+ if (ioA.start === ioB.start) {
235
+ return ioA.end - ioB.end;
236
+ }
237
+ return ioA.start - ioB.start;
238
+}
239
+
240
export default function InspectedElementSuspendedBy({
241
bridge,
242
element,
@@ -264,6 +273,9 @@ export default function InspectedElementSuspendedBy({
273
minTime = maxTime - 25;
274
}
275
276
+ const sortedSuspendedBy = suspendedBy.slice(0);
277
+ sortedSuspendedBy.sort(compareTime);
278
+
279
return (
280
<div>
281
<div className={styles.HeaderRow}>
@@ -272,7 +284,7 @@ export default function InspectedElementSuspendedBy({
284
<ButtonIcon type="copy" />
285
</Button>
286
</div>
275
- {suspendedBy.map((asyncInfo, index) => (
287
+ {sortedSuspendedBy.map((asyncInfo, index) => (
288
<SuspendedByRow
289
key={index}
290
index={index}