Avoid flashing "Loading..." in right pane
Dan Abramov committed
Mar 29, 2019 at 23:58 UTC
b223ec3b393ffc19e2741903ab36661f550795c3
1 file changed
+11
-1
src/devtools/views/Elements/SelectedElement.js
+11
-1
@@ -30,7 +30,9 @@ export default function SelectedElement(_: Props) {
30
const element =
31
selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
32
33
- const inspectedElement = useInspectedElement(selectedElementID);
33
+ const actualInspectedElement = useInspectedElement(selectedElementID);
34
+ // The UI lags behind to avoid flashing a loading state.
35
+ const inspectedElement = useLastNonNullValue(actualInspectedElement);
36
37
const highlightElement = useCallback(() => {
38
if (element !== null && selectedElementID !== null) {
@@ -284,3 +286,11 @@ function useInspectedElement(id: number | null): InspectedElement | null {
286
287
return inspectedElement;
288
}
289
+
290
+function useLastNonNullValue<T>(value: T | null): T | null {
291
+ const [lastNonNullValue, setLastNonNullValue] = useState(value);
292
+ if (value !== null && value !== lastNonNullValue) {
293
+ setLastNonNullValue(value);
294
+ }
295
+ return lastNonNullValue;
296
+}