Merge pull request facebook#41 from gaearon/smoother-right-pane

Avoid flashing "Loading..." in right pane
bvaughn · Apr 2, 2019 · fa317be · fa317be
2 parents b8ada90 + b223ec3
commit fa317be
Showing 1 changed file with 11 additions and 1 deletion.
diff --git 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<T>(value: T | null): T | null {
+  const [lastNonNullValue, setLastNonNullValue] = useState(value);
+  if (value !== null && value !== lastNonNullValue) {
+    setLastNonNullValue(value);
+  }
+  return lastNonNullValue;
+}