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 d1da51a0cf1fe..19cc47f982cbf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -300,9 +300,31 @@ type Props = { store: Store, }; -function compareTime(a: SerializedAsyncInfo, b: SerializedAsyncInfo): number { - const ioA = a.awaited; - const ioB = b.awaited; +function withIndex( + value: SerializedAsyncInfo, + index: number, +): { + index: number, + value: SerializedAsyncInfo, +} { + return { + index, + value, + }; +} + +function compareTime( + a: { + index: number, + value: SerializedAsyncInfo, + }, + b: { + index: number, + value: SerializedAsyncInfo, + }, +): number { + const ioA = a.value.awaited; + const ioB = b.value.awaited; if (ioA.start === ioB.start) { return ioA.end - ioB.end; } @@ -364,7 +386,8 @@ export default function InspectedElementSuspendedBy({ minTime = maxTime - 25; } - const sortedSuspendedBy = suspendedBy === null ? [] : suspendedBy.slice(0); + const sortedSuspendedBy = + suspendedBy === null ? [] : suspendedBy.map(withIndex); sortedSuspendedBy.sort(compareTime); let unknownSuspenders = null; @@ -407,11 +430,11 @@ export default function InspectedElementSuspendedBy({ - {sortedSuspendedBy.map((asyncInfo, index) => ( + {sortedSuspendedBy.map(({value, index}) => (