[DevTools] Sort "Suspended By" view by the start time (facebook#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.

Author: sebmarkbage

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}