From 39e72c4fb417138208cba0d5bd2e6e1c3866bc52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Mon, 6 Apr 2020 17:20:59 +0200
Subject: [PATCH] fix(docsearch): do not render Screen when loading or stalled

---
 src/ScreenState.tsx | 50 ++++++++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/ScreenState.tsx b/src/ScreenState.tsx
index d767cf34..5b5d8c89 100644
--- a/src/ScreenState.tsx
+++ b/src/ScreenState.tsx
@@ -25,27 +25,39 @@ interface ScreenStateProps<TItem>
   inputRef: React.MutableRefObject<null | HTMLInputElement>;
 }
 
-export function ScreenState(props: ScreenStateProps<InternalDocSearchHit>) {
-  if (props.state.status === 'error') {
-    return <ErrorScreen />;
-  }
+export const ScreenState = React.memo(
+  (props: ScreenStateProps<InternalDocSearchHit>) => {
+    if (props.state.status === 'error') {
+      return <ErrorScreen />;
+    }
 
-  const hasSuggestions = props.state.suggestions.some(
-    suggestion => suggestion.items.length > 0
-  );
+    const hasSuggestions = props.state.suggestions.some(
+      suggestion => suggestion.items.length > 0
+    );
 
-  if (!props.state.query) {
+    if (!props.state.query) {
+      return (
+        <StartScreen
+          {...(props as ScreenStateProps<any>)}
+          hasSuggestions={hasSuggestions}
+        />
+      );
+    }
+
+    if (hasSuggestions === false) {
+      return <NoResultsScreen {...props} />;
+    }
+
+    return <ResultsScreen {...props} />;
+  },
+  function areEqual(_prevProps, nextProps) {
+    // We don't update the screen when Autocomplete is loading or stalled to
+    // avoid UI flashes:
+    //  - Empty screen → Results screen
+    //  - NoResults screen → NoResults screen with another query
     return (
-      <StartScreen
-        {...(props as ScreenStateProps<any>)}
-        hasSuggestions={hasSuggestions}
-      />
+      nextProps.state.status === 'loading' ||
+      nextProps.state.status === 'stalled'
     );
   }
-
-  if (props.state.status === 'idle' && hasSuggestions === false) {
-    return <NoResultsScreen {...props} />;
-  }
-
-  return <ResultsScreen {...props} />;
-}
+);