mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Merge pull request #41 from gaearon/smoother-right-pane
Avoid flashing "Loading..." in right pane
This commit is contained in:
@@ -30,7 +30,9 @@ export default function SelectedElement(_: Props) {
|
|||||||
const element =
|
const element =
|
||||||
selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
|
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(() => {
|
const highlightElement = useCallback(() => {
|
||||||
if (element !== null && selectedElementID !== null) {
|
if (element !== null && selectedElementID !== null) {
|
||||||
@@ -284,3 +286,11 @@ function useInspectedElement(id: number | null): InspectedElement | null {
|
|||||||
|
|
||||||
return inspectedElement;
|
return inspectedElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function useLastNonNullValue<T>(value: T | null): T | null {
|
||||||
|
const [lastNonNullValue, setLastNonNullValue] = useState(value);
|
||||||
|
if (value !== null && value !== lastNonNullValue) {
|
||||||
|
setLastNonNullValue(value);
|
||||||
|
}
|
||||||
|
return lastNonNullValue;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user