Merge pull request #31737 from ZhenjaHorbach/web-profile-when-selecti…

…ng-the-last-country-or-state-extra-space-is-displayed-for-a-while Web - Profile - When selecting the last country or state extra space is displayed for a while
Expensify · Nov 27, 2023 · 090dc3a · 090dc3a
2 parents bade0c3 + 31b15b1
commit 090dc3a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 10 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -2835,6 +2835,14 @@ const CONST = {
     PERFORMANCE_TESTS: {
         RUNS: 20,
     },
+
+    /**
+     * Constants for maxToRenderPerBatch parameter that is used for FlatList or SectionList. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+     */
+    MAX_TO_RENDER_PER_BATCH: {
+        DEFAULT: 5,
+        CAROUSEL: 3,
+    },
 } as const;
 
 export default CONST;
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
@@ -12,6 +12,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer';
 import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
@@ -203,7 +204,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                             initialScrollIndex={page}
                             initialNumToRender={3}
                             windowSize={5}
-                            maxToRenderPerBatch={3}
+                            maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.CAROUSEL}
                             data={attachments}
                             CellRendererComponent={AttachmentCarouselCellRenderer}
                             renderItem={renderItem}

diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
@@ -9,6 +9,7 @@ import Text from '@components/Text';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import {defaultProps as optionsListDefaultProps, propTypes as optionsListPropTypes} from './optionsListPropTypes';
 
 const propTypes = {
@@ -281,7 +282,7 @@ function BaseOptionsList({
                         renderSectionHeader={renderSectionHeader}
                         extraData={focusedIndex}
                         initialNumToRender={12}
-                        maxToRenderPerBatch={5}
+                        maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT}
                         windowSize={5}
                         viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                         onViewableItemsChanged={onViewableItemsChanged}

diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -59,6 +59,7 @@ function BaseSelectionList({
     disableKeyboardShortcuts = false,
     children,
     shouldStopPropagation = false,
+    shouldUseDynamicMaxToRenderPerBatch = false,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -71,6 +72,8 @@ function BaseSelectionList({
     const shouldShowSelectAll = Boolean(onSelectAll);
     const activeElement = useActiveElement();
     const isFocused = useIsFocused();
+    const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
+
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
      * - `allOptions`: Contains all the items in the list, flattened, regardless of section
@@ -301,6 +304,7 @@ function BaseSelectionList({
                 item={item}
                 isFocused={isItemFocused}
                 isDisabled={isDisabled}
+                isHide={!maxToRenderPerBatch}
                 showTooltip={showTooltip}
                 canSelectMultiple={canSelectMultiple}
                 onSelectRow={() => selectRow(item, true)}
@@ -310,13 +314,23 @@ function BaseSelectionList({
         );
     };
 
-    const scrollToFocusedIndexOnFirstRender = useCallback(() => {
-        if (!firstLayoutRef.current) {
-            return;
-        }
-        scrollToIndex(focusedIndex, false);
-        firstLayoutRef.current = false;
-    }, [focusedIndex, scrollToIndex]);
+    const scrollToFocusedIndexOnFirstRender = useCallback(
+        ({nativeEvent}) => {
+            if (shouldUseDynamicMaxToRenderPerBatch) {
+                const listHeight = lodashGet(nativeEvent, 'layout.height', 0);
+                const itemHeight = lodashGet(nativeEvent, 'layout.y', 0);
+
+                setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
+            }
+
+            if (!firstLayoutRef.current) {
+                return;
+            }
+            scrollToIndex(focusedIndex, false);
+            firstLayoutRef.current = false;
+        },
+        [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
+    );
 
     const updateAndScrollToFocusedIndex = useCallback(
         (newFocusedIndex) => {
@@ -451,11 +465,12 @@ function BaseSelectionList({
                                     keyboardShouldPersistTaps="always"
                                     showsVerticalScrollIndicator={showScrollIndicator}
                                     initialNumToRender={12}
-                                    maxToRenderPerBatch={5}
+                                    maxToRenderPerBatch={maxToRenderPerBatch}
                                     windowSize={5}
                                     viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                                     testID="selection-list"
                                     onLayout={scrollToFocusedIndexOnFirstRender}
+                                    style={!maxToRenderPerBatch && styles.opacity0}
                                 />
                                 {children}
                             </>

diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
@@ -182,6 +182,9 @@ const propTypes = {
 
     /** Custom content to display in the footer */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+    /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
+    shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool,
 };
 
 export {propTypes, baseListItemPropTypes, radioListItemPropTypes, userListItemPropTypes};
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
@@ -101,6 +101,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                     onChangeText={setSearchValue}
                     initiallyFocusedOptionKey={currentState}
                     shouldStopPropagation
+                    shouldUseDynamicMaxToRenderPerBatch
                 />
             </ScreenWrapper>
         </Modal>

diff --git a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js
@@ -96,6 +96,7 @@ function CountrySelectionPage({route, navigation}) {
                 onSelectRow={selectCountry}
                 onChangeText={setSearchValue}
                 initiallyFocusedOptionKey={currentCountry}
+                shouldUseDynamicMaxToRenderPerBatch
             />
         </ScreenWrapper>
     );