Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [Search v1] Search page scroll is not smooth #42170

Merged
merged 8 commits into from
May 27, 2024
2 changes: 2 additions & 0 deletions src/components/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ function Search({query, policyIDs}: SearchProps) {
return (
<SelectionList
customListHeader={<SearchTableHeader data={searchResults?.data} />}
windowSize={111} // 111 is bigger enough to cache all the items not recycled when scrolling
updateCellsBatchingPeriod={200} // 200ms a delay to update the cells
charles-liang marked this conversation as resolved.
Show resolved Hide resolved
charles-liang marked this conversation as resolved.
Show resolved Hide resolved
ListItem={ListItem}
sections={[{data, isDisabled: false}]}
onSelectRow={(item) => {
Expand Down
8 changes: 6 additions & 2 deletions src/components/SelectionList/BaseSelectionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ function BaseSelectionList<TItem extends ListItem>(
shouldTextInputInterceptSwipe = false,
onEndReached = () => {},
onEndReachedThreshold,
windowSize = 5,
updateCellsBatchingPeriod = 50,
}: BaseSelectionListProps<TItem>,
ref: ForwardedRef<SelectionListHandle>,
) {
Expand Down Expand Up @@ -358,7 +360,8 @@ function BaseSelectionList<TItem extends ListItem>(
shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
// We're already handling the Enter key press in the useKeyboardShortcut hook, so we don't want the list item to submit the form
shouldPreventEnterKeySubmit
rightHandSideComponent={rightHandSideComponent}
// Change this because of lint
rightHandSideComponent={rightHandSideComponent && (typeof rightHandSideComponent === 'function' ? rightHandSideComponent({} as TItem) : rightHandSideComponent)}
luacmartins marked this conversation as resolved.
Show resolved Hide resolved
keyForList={item.keyForList ?? ''}
isMultilineSupported={isRowMultilineSupported}
onFocus={() => setFocusedIndex(normalizedIndex)}
Expand Down Expand Up @@ -614,7 +617,8 @@ function BaseSelectionList<TItem extends ListItem>(
showsVerticalScrollIndicator={showScrollIndicator}
initialNumToRender={12}
maxToRenderPerBatch={maxToRenderPerBatch}
windowSize={5}
windowSize={windowSize}
updateCellsBatchingPeriod={updateCellsBatchingPeriod}
viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
testID="selection-list"
onLayout={onSectionListLayout}
Expand Down
Loading
Loading