Merge pull request #39364 from bernhardoj/fix/39245-delayed-group-cha…

…t-confirmation-list FIx group chat confirmation list is displayed with delay
Expensify · Apr 3, 2024 · 2b592a2 · 2b592a2
2 parents 838206f + 4860deb
commit 2b592a2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -70,6 +70,7 @@ function BaseSelectionList<TItem extends ListItem>(
         isRowMultilineSupported = false,
         textInputRef,
         headerMessageStyle,
+        shouldHideListOnInitialRender = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -572,7 +573,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                     viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                                     testID="selection-list"
                                     onLayout={onSectionListLayout}
-                                    style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0}
+                                    style={(!maxToRenderPerBatch || (shouldHideListOnInitialRender && isInitialSectionListRender)) && styles.opacity0}
                                     ListFooterComponent={ShowMoreButtonInstance}
                                 />
                                 {children}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -297,6 +297,12 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Ref for textInput */
     textInputRef?: MutableRefObject<TextInput | null>;
+
+    /**
+     * When true, the list won't be visible until the list layout is measured. This prevents the list from "blinking" as it's scrolled to the bottom which is recommended for large lists.
+     * When false, the list will render immediately and scroll to the bottom which works great for small lists.
+     */
+    shouldHideListOnInitialRender?: boolean;
 };
 
 type SelectionListHandle = {

diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
@@ -135,6 +135,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
                 showConfirmButton={selectedOptions.length > 1}
                 confirmButtonText={translate('newChatPage.startGroup')}
                 onConfirm={createGroup}
+                shouldHideListOnInitialRender={false}
             />
         </ScreenWrapper>
     );