OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[DevTools] Sort "Suspended By" view by the start time (#34105)

Browse Source 
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.
This commit is contained in:
Sebastian Markbåge 2025-08-06 11:23:00 -04:00 committed by GitHub
parent 0825d019be
commit 66f09bd054
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js vendored
View File

@ -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}