diff --git a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap index 7221c7a672..83fa3f29e2 100644 --- a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap +++ b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap @@ -5,7 +5,6 @@ Object { "children": Array [ { ); }; +const extractKey = (item: any) => item; +const itemLayout = (d: any, index: number) => ( + {length: 40, offset: 40 * index, index} +); + const CategoryBody = ({category, categoryChannels, channels, myChannels}: Props) => { const data: string[] = useMemo(() => { switch (category.sorting) { @@ -40,6 +45,12 @@ const CategoryBody = ({category, categoryChannels, channels, myChannels}: Props) ); }; diff --git a/app/components/channel_list/categories/categories.tsx b/app/components/channel_list/categories/categories.tsx index 8ab4e14e70..eeaab72f9c 100644 --- a/app/components/channel_list/categories/categories.tsx +++ b/app/components/channel_list/categories/categories.tsx @@ -20,6 +20,8 @@ const styles = StyleSheet.create({ }, }); +const extractKey = (item: CategoryModel) => item.id; + const renderCategory = (data: {item: CategoryModel}) => { return ( <> @@ -44,6 +46,12 @@ const Categories = (props: Props) => { style={styles.flex} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} + keyExtractor={extractKey} + removeClippedSubviews={true} + initialNumToRender={5} + windowSize={15} + updateCellsBatchingPeriod={10} + maxToRenderPerBatch={5} /> ); }; diff --git a/app/constants/index.ts b/app/constants/index.ts index c6dd4b430d..003486a88e 100644 --- a/app/constants/index.ts +++ b/app/constants/index.ts @@ -11,6 +11,7 @@ import Emoji from './emoji'; import Events from './events'; import Files from './files'; import General from './general'; +import List from './list'; import Navigation from './navigation'; import Network from './network'; import Permissions from './permissions'; @@ -36,6 +37,7 @@ export { Events, Files, General, + List, Navigation, Network, Permissions, diff --git a/app/constants/list.ts b/app/constants/list.ts new file mode 100644 index 0000000000..ea73ec5da4 --- /dev/null +++ b/app/constants/list.ts @@ -0,0 +1,13 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +const VISIBILITY_CONFIG_DEFAULTS = { + itemVisiblePercentThreshold: 100, + waitForInteraction: true, +}; + +export default { + VISIBILITY_CONFIG_DEFAULTS, + VISIBILITY_SCROLL_DOWN: 'down', + VISIBILITY_SCROLL_UP: 'up', +};