From 4a2da6a31a129e43cc3220f7927257445eb038e7 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 1 Apr 2024 23:33:08 +0800 Subject: [PATCH 1/7] fix list is not visible initially --- src/components/SelectionList/BaseSelectionList.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index f3efee4045cf..c14383406bd5 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -75,6 +75,7 @@ function BaseSelectionList( ) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const firstLayoutRef = useRef(true); const listRef = useRef>>(null); const innerTextInputRef = useRef(null); const focusTimeoutRef = useRef(null); @@ -83,7 +84,6 @@ function BaseSelectionList( const activeElementRole = useActiveElementRole(); const isFocused = useIsFocused(); const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); - const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true); const [itemsToHighlight, setItemsToHighlight] = useState | null>(null); const itemFocusTimeoutRef = useRef(null); const [currentPage, setCurrentPage] = useState(1); @@ -349,13 +349,13 @@ function BaseSelectionList( setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); } - if (!isInitialSectionListRender) { + if (!firstLayoutRef.current) { return; } scrollToIndex(focusedIndex, false); - setIsInitialSectionListRender(false); + firstLayoutRef.current = false; }, - [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], + [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], ); const onSectionListLayout = useCallback( @@ -573,7 +573,7 @@ function BaseSelectionList( viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}} testID="selection-list" onLayout={onSectionListLayout} - style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0} + style={!maxToRenderPerBatch && styles.opacity0} ListFooterComponent={ShowMoreButtonInstance} /> {children} From dc672dcaf35aa7daadcd6e02d5d131d3ac037611 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Apr 2024 19:57:24 +0800 Subject: [PATCH 2/7] add hide list on initial render back --- src/components/SelectionList/BaseSelectionList.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index fa7092e8c9d0..67de6b2b7718 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -75,7 +75,6 @@ function BaseSelectionList( ) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const firstLayoutRef = useRef(true); const listRef = useRef>>(null); const innerTextInputRef = useRef(null); const focusTimeoutRef = useRef(null); @@ -84,6 +83,7 @@ function BaseSelectionList( const activeElementRole = useActiveElementRole(); const isFocused = useIsFocused(); const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); + const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true); const [itemsToHighlight, setItemsToHighlight] = useState | null>(null); const itemFocusTimeoutRef = useRef(null); const [currentPage, setCurrentPage] = useState(1); @@ -348,13 +348,13 @@ function BaseSelectionList( setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); } - if (!firstLayoutRef.current) { + if (!isInitialSectionListRender) { return; } scrollToIndex(focusedIndex, false); - firstLayoutRef.current = false; + setIsInitialSectionListRender(false); }, - [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], + [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch], ); const onSectionListLayout = useCallback( @@ -572,7 +572,7 @@ function BaseSelectionList( viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}} testID="selection-list" onLayout={onSectionListLayout} - style={!maxToRenderPerBatch && styles.opacity0} + style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0} ListFooterComponent={ShowMoreButtonInstance} /> {children} From 4ea37b6c8eb7eb7a2ee4a7678face11a69c0d535 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Apr 2024 20:01:06 +0800 Subject: [PATCH 3/7] control hide list on initial render with a prop --- src/components/SelectionList/BaseSelectionList.tsx | 3 ++- src/components/SelectionList/types.ts | 3 +++ src/pages/NewChatConfirmPage.tsx | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 67de6b2b7718..8dd7577de779 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -70,6 +70,7 @@ function BaseSelectionList( isRowMultilineSupported = false, textInputRef, headerMessageStyle, + shouldHideListOnInitialRender = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -572,7 +573,7 @@ function BaseSelectionList( 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 index 9e7e64896f4f..926aeace4e40 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -297,6 +297,9 @@ type BaseSelectionListProps = Partial & { /** Ref for textInput */ textInputRef?: MutableRefObject; + + /** Whether to hide the list on initial render */ + shouldHideListOnInitialRender?: boolean, }; type SelectionListHandle = { diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx index e6214b160a99..dfb30bded769 100644 --- 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} /> ); From 4a25938f7faf7987caa8792feac836c4037f22fc Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Apr 2024 20:07:35 +0800 Subject: [PATCH 4/7] prettier --- src/components/SelectionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 926aeace4e40..3507501058a1 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -299,7 +299,7 @@ type BaseSelectionListProps = Partial & { textInputRef?: MutableRefObject; /** Whether to hide the list on initial render */ - shouldHideListOnInitialRender?: boolean, + shouldHideListOnInitialRender?: boolean; }; type SelectionListHandle = { From 416355ec935f6ef834cbbfaa6594e4c32d3faeb4 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Apr 2024 23:16:55 +0800 Subject: [PATCH 5/7] update comment --- src/components/SelectionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 3507501058a1..9262cf37a8e8 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -298,7 +298,7 @@ type BaseSelectionListProps = Partial & { /** Ref for textInput */ textInputRef?: MutableRefObject; - /** Whether to hide the list on initial render */ + /** Whether to hide the list on the initial render. This would prevent the list from "blinking" when you have a long list and it auto scrolls to the bottom on mount but will delay the showing of the list */ shouldHideListOnInitialRender?: boolean; }; From f43af2abe4d13cb984fcfb91820708bd1ce214b8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Apr 2024 23:47:26 +0800 Subject: [PATCH 6/7] update comment --- src/components/SelectionList/types.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 9262cf37a8e8..f19becd589b4 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -298,7 +298,10 @@ type BaseSelectionListProps = Partial & { /** Ref for textInput */ textInputRef?: MutableRefObject; - /** Whether to hide the list on the initial render. This would prevent the list from "blinking" when you have a long list and it auto scrolls to the bottom on mount but will delay the showing of the list */ + /** + * 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; }; From 4860debf3a3791b6a6c372546ee56ae626810737 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Apr 2024 00:15:08 +0800 Subject: [PATCH 7/7] prettier --- src/components/SelectionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index f19becd589b4..e401dd5456b2 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -299,7 +299,7 @@ type BaseSelectionListProps = Partial & { textInputRef?: MutableRefObject; /** - * 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 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;