From 66f09bd0540d0a094b80c94d013df885903c97da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 6 Aug 2025 11:23:00 -0400
Subject: [PATCH] [DevTools] Sort "Suspended By" view by the start time
 (#34105)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../Components/InspectedElementSuspendedBy.js      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
index 79fdbd1a36..a1b76e49b6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
@@ -228,6 +228,15 @@ type Props = {
   store: Store,
 };
 
+function compareTime(a: SerializedAsyncInfo, b: SerializedAsyncInfo): number {
+  const ioA = a.awaited;
+  const ioB = b.awaited;
+  if (ioA.start === ioB.start) {
+    return ioA.end - ioB.end;
+  }
+  return ioA.start - ioB.start;
+}
+
 export default function InspectedElementSuspendedBy({
   bridge,
   element,
@@ -264,6 +273,9 @@ export default function InspectedElementSuspendedBy({
     minTime = maxTime - 25;
   }
 
+  const sortedSuspendedBy = suspendedBy.slice(0);
+  sortedSuspendedBy.sort(compareTime);
+
   return (
     <div>
       <div className={styles.HeaderRow}>
@@ -272,7 +284,7 @@ export default function InspectedElementSuspendedBy({
           <ButtonIcon type="copy" />
         </Button>
       </div>
-      {suspendedBy.map((asyncInfo, index) => (
+      {sortedSuspendedBy.map((asyncInfo, index) => (
         <SuspendedByRow
           key={index}
           index={index}