diff --git a/src/ScreenState.tsx b/src/ScreenState.tsx index d767cf340..5b5d8c895 100644 --- a/src/ScreenState.tsx +++ b/src/ScreenState.tsx @@ -25,27 +25,39 @@ interface ScreenStateProps inputRef: React.MutableRefObject; } -export function ScreenState(props: ScreenStateProps) { - if (props.state.status === 'error') { - return ; - } +export const ScreenState = React.memo( + (props: ScreenStateProps) => { + if (props.state.status === 'error') { + return ; + } + + const hasSuggestions = props.state.suggestions.some( + suggestion => suggestion.items.length > 0 + ); + + if (!props.state.query) { + return ( + )} + hasSuggestions={hasSuggestions} + /> + ); + } - const hasSuggestions = props.state.suggestions.some( - suggestion => suggestion.items.length > 0 - ); + if (hasSuggestions === false) { + return ; + } - if (!props.state.query) { + return ; + }, + 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 ( - )} - hasSuggestions={hasSuggestions} - /> + nextProps.state.status === 'loading' || + nextProps.state.status === 'stalled' ); } - - if (props.state.status === 'idle' && hasSuggestions === false) { - return ; - } - - return ; -} +);