diff --git a/src/devtools/views/Elements/SelectedElement.js b/src/devtools/views/Elements/SelectedElement.js index 2cec5677ba..6b1401f5b8 100644 --- a/src/devtools/views/Elements/SelectedElement.js +++ b/src/devtools/views/Elements/SelectedElement.js @@ -30,7 +30,9 @@ export default function SelectedElement(_: Props) { const element = selectedElementID !== null ? store.getElementByID(selectedElementID) : null; - const inspectedElement = useInspectedElement(selectedElementID); + const actualInspectedElement = useInspectedElement(selectedElementID); + // The UI lags behind to avoid flashing a loading state. + const inspectedElement = useLastNonNullValue(actualInspectedElement); const highlightElement = useCallback(() => { if (element !== null && selectedElementID !== null) { @@ -284,3 +286,11 @@ function useInspectedElement(id: number | null): InspectedElement | null { return inspectedElement; } + +function useLastNonNullValue(value: T | null): T | null { + const [lastNonNullValue, setLastNonNullValue] = useState(value); + if (value !== null && value !== lastNonNullValue) { + setLastNonNullValue(value); + } + return lastNonNullValue; +}