diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css index 978077d2d9a..413554008fa 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css @@ -75,6 +75,10 @@ display: flex; } +.CollapsableHeader[data-pending="true"] { + cursor: progress; +} + .CollapsableHeaderIcon { flex: 0 0 1rem; margin-left: -0.25rem; 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 a9d22b5a881..54a1c6c9529 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -9,7 +9,7 @@ import {copy} from 'clipboard-js'; import * as React from 'react'; -import {useState} from 'react'; +import {useState, useTransition} from 'react'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import KeyValue from './KeyValue'; @@ -101,6 +101,7 @@ function SuspendedByRow({ maxTime, }: RowProps) { const [isOpen, setIsOpen] = useState(false); + const [openIsPending, startOpenTransition] = useTransition(); const ioInfo = asyncInfo.awaited; const name = useInferredName(asyncInfo); const description = ioInfo.description; @@ -144,7 +145,16 @@ function SuspendedByRow({