djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve rendering of large lists

Browse source
This commit is contained in:
dominik-zeglen 2020-09-24 12:54:43 +02:00
parent 2b92211b99
commit baff4413a5
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -124,6 +124,8 @@ function getChoiceIndex(
return choiceIndex;
}
const sliceSize = 20;
const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFieldContentProps> = props => {
const {
add,
@ -147,6 +149,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
const anchor = React.useRef<HTMLDivElement>();
const scrollPosition = useElementScroll(anchor);
const [calledForMore, setCalledForMore] = React.useState(false);
const [slice, setSlice] = React.useState(sliceSize);
const scrolledToBottom = isScrolledToBottom(anchor, scrollPosition, offset);
@ -154,9 +157,18 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
if (!calledForMore && onFetchMore && scrolledToBottom) {
onFetchMore();
setCalledForMore(true);
} else if (scrolledToBottom) {
setSlice(slice => slice + sliceSize);
}
}, [scrolledToBottom]);
React.useEffect(() => {
setSlice(sliceSize);
anchor.current.scrollTo({
top: 0
});
}, [choices?.length]);
React.useEffect(() => {
if (calledForMore && !loading) {
setCalledForMore(false);
@ -219,7 +231,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
{choices.length > 0 && (!!add || displayCustomValue) && (
<Hr className={classes.hr} />
)}
{choices.map((suggestion, index) => {
{choices.slice(0, slice).map((suggestion, index) => {
const choiceIndex = getChoiceIndex(
index,
emptyOption,