From 2da6dd95a79c5d1014d3d54547d3a0031a6e982b Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Sat, 9 Dec 2023 13:23:52 +0100 Subject: [PATCH 1/4] feat: hiding list while scrolling in initial render --- .../SelectionList/BaseSelectionList.js | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 3411d7e03cb9..2626ff614b47 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -64,7 +64,6 @@ function BaseSelectionList({ const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const firstLayoutRef = useRef(true); const listRef = useRef(null); const textInputRef = useRef(null); const focusTimeoutRef = useRef(null); @@ -73,6 +72,7 @@ function BaseSelectionList({ const activeElement = useActiveElement(); const isFocused = useIsFocused(); const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); + const [isInitialRender, setIsInitialRender] = useState(true); /** * Iterates through the sections and items inside each section, and builds 3 arrays along the way: @@ -187,6 +187,18 @@ function BaseSelectionList({ [flattenedSections.allOptions], ); + const handleScroll = useCallback( + (event) => { + if (typeof onScroll === 'function') { + onScroll(event); + } + if (isInitialRender) { + setIsInitialRender(false); + } + }, + [isInitialRender, onScroll], + ); + /** * Logic to run when a row is selected, either with click/press or keyboard hotkeys. * @@ -325,11 +337,10 @@ function BaseSelectionList({ setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); } - if (!firstLayoutRef.current) { + if (!isInitialRender) { return; } scrollToIndex(focusedIndex, false); - firstLayoutRef.current = false; }, [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], ); @@ -359,7 +370,7 @@ function BaseSelectionList({ useEffect(() => { // do not change focus on the first render, as it should focus on the selected item - if (firstLayoutRef.current) { + if (isInitialRender) { return; } @@ -394,7 +405,7 @@ function BaseSelectionList({ > {({safeAreaPaddingBottomStyle}) => ( - + {shouldShowTextInput && ( item.keyForList} extraData={focusedIndex} From 8316f7e615e899939b83f9830c5b660f569879ad Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Sat, 9 Dec 2023 13:24:55 +0100 Subject: [PATCH 2/4] feat: hiding list while scrolling in initial render --- src/components/SelectionList/BaseSelectionList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 2626ff614b47..9c8016f9a095 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -164,6 +164,7 @@ function BaseSelectionList({ const item = flattenedSections.allOptions[index]; if (!listRef.current || !item) { + setIsInitialRender(false); return; } From 3a035bc3e5b0bc01fa0e0b8af62ca7057ba037a0 Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Sat, 9 Dec 2023 13:36:11 +0100 Subject: [PATCH 3/4] feat: hiding list while scrolling in initial render --- .../SelectionList/BaseSelectionList.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 9c8016f9a095..51fb5fbdfd4f 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -164,7 +164,6 @@ function BaseSelectionList({ const item = flattenedSections.allOptions[index]; if (!listRef.current || !item) { - setIsInitialRender(false); return; } @@ -188,18 +187,6 @@ function BaseSelectionList({ [flattenedSections.allOptions], ); - const handleScroll = useCallback( - (event) => { - if (typeof onScroll === 'function') { - onScroll(event); - } - if (isInitialRender) { - setIsInitialRender(false); - } - }, - [isInitialRender, onScroll], - ); - /** * Logic to run when a row is selected, either with click/press or keyboard hotkeys. * @@ -342,6 +329,7 @@ function BaseSelectionList({ return; } scrollToIndex(focusedIndex, false); + setIsInitialRender(false); }, [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], ); @@ -471,7 +459,7 @@ function BaseSelectionList({ renderSectionHeader={renderSectionHeader} renderItem={renderItem} getItemLayout={getItemLayout} - onScroll={handleScroll} + onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} keyExtractor={(item) => item.keyForList} extraData={focusedIndex} From 996f159423412fd2ccda8980df8fbec1b360f0bc Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Mon, 11 Dec 2023 11:09:25 +0100 Subject: [PATCH 4/4] fix: fixed lin error, added styles to the variable --- src/components/SelectionList/BaseSelectionList.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 51fb5fbdfd4f..79e38b304cdb 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -73,6 +73,7 @@ function BaseSelectionList({ const isFocused = useIsFocused(); const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); const [isInitialRender, setIsInitialRender] = useState(true); + const wrapperStyles = useMemo(() => ({opacity: isInitialRender ? 0 : 1}), [isInitialRender]); /** * Iterates through the sections and items inside each section, and builds 3 arrays along the way: @@ -331,7 +332,7 @@ function BaseSelectionList({ scrollToIndex(focusedIndex, false); setIsInitialRender(false); }, - [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], + [focusedIndex, isInitialRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], ); const updateAndScrollToFocusedIndex = useCallback( @@ -394,7 +395,7 @@ function BaseSelectionList({ > {({safeAreaPaddingBottomStyle}) => ( - + {shouldShowTextInput && (