From b223ec3b393ffc19e2741903ab36661f550795c3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 29 Mar 2019 23:58:42 -0700
Subject: [PATCH] Avoid flashing "Loading..." in right pane

---
 src/devtools/views/Elements/SelectedElement.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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<T>(value: T | null): T | null {
+  const [lastNonNullValue, setLastNonNullValue] = useState(value);
+  if (value !== null && value !== lastNonNullValue) {
+    setLastNonNullValue(value);
+  }
+  return lastNonNullValue;
+}