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] Show Transition indicator when "suspended by" rows are expanded (#34565)

Browse Source
This commit is contained in:
Sebastian "Sebbie" Silbermann 2025-09-26 22:27:22 +02:00 committed by GitHub
parent c552618a82
commit 8a24ef3e75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
View File

@ -75,6 +75,10 @@
display: flex;
}
.CollapsableHeader[data-pending="true"] {
cursor: progress;
}
.CollapsableHeaderIcon {
flex: 0 0 1rem;
margin-left: -0.25rem;

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

@ -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({
<div className={styles.CollapsableRow}>
<Button
className={styles.CollapsableHeader}
onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
// TODO: May be better to leave to React's default Transition indicator.
// Though no apps implement this option at the moment.
data-pending={openIsPending}
onClick={() => {
startOpenTransition(() => {
setIsOpen(prevIsOpen => !prevIsOpen);
});
}}
// Changing the title on pending transition will not be visible since
// (Reach?) tooltips are dismissed on activation.
title={
longName +
' — ' +