Skip to content

Commit

Permalink
fix(docsearch): do not render Screen when loading or stalled
Browse files Browse the repository at this point in the history
  • Loading branch information
francoischalifour committed Apr 6, 2020
1 parent ca8e410 commit 39e72c4
Showing 1 changed file with 31 additions and 19 deletions.
50 changes: 31 additions & 19 deletions src/ScreenState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
);

if (!props.state.query) {
return (
<StartScreen
{...(props as ScreenStateProps<any>)}
hasSuggestions={hasSuggestions}
/>
);
}

const hasSuggestions = props.state.suggestions.some(
suggestion => suggestion.items.length > 0
);
if (hasSuggestions === false) {
return <NoResultsScreen {...props} />;
}

if (!props.state.query) {
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} />;
}
);

0 comments on commit 39e72c4

Please sign in to comment.