[DevTools] Show Transition indicator when "suspended by" rows are expanded (#34565)
Sebastian "Sebbie" Silbermann committed
Sep 26, 2025 at 22:27 UTC
8a24ef3e750edf2b58cf717f79e60df982468957
2 files changed
+16
-2
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
+4
@@ -75,6 +75,10 @@
75
display: flex;
76
}
77
78
+.CollapsableHeader[data-pending="true"] {
79
+ cursor: progress;
80
+}
81
+
82
.CollapsableHeaderIcon {
83
flex: 0 0 1rem;
84
margin-left: -0.25rem;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
+12
-2
@@ -9,7 +9,7 @@
9
10
import {copy} from 'clipboard-js';
11
import * as React from 'react';
12
-import {useState} from 'react';
12
+import {useState, useTransition} from 'react';
13
import Button from '../Button';
14
import ButtonIcon from '../ButtonIcon';
15
import KeyValue from './KeyValue';
@@ -101,6 +101,7 @@ function SuspendedByRow({
101
maxTime,
102
}: RowProps) {
103
const [isOpen, setIsOpen] = useState(false);
104
+ const [openIsPending, startOpenTransition] = useTransition();
105
const ioInfo = asyncInfo.awaited;
106
const name = useInferredName(asyncInfo);
107
const description = ioInfo.description;
@@ -144,7 +145,16 @@ function SuspendedByRow({
145
<div className={styles.CollapsableRow}>
146
<Button
147
className={styles.CollapsableHeader}
147
- onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
148
+ // TODO: May be better to leave to React's default Transition indicator.
149
+ // Though no apps implement this option at the moment.
150
+ data-pending={openIsPending}
151
+ onClick={() => {
152
+ startOpenTransition(() => {
153
+ setIsOpen(prevIsOpen => !prevIsOpen);
154
+ });
155
+ }}
156
+ // Changing the title on pending transition will not be visible since
157
+ // (Reach?) tooltips are dismissed on activation.
158
title={
159
longName +
160
' — ' +