[Gekidou] Sidebar Categories FlatList Optimisations (#6031)

* Adds optimisation to sidebar category lists rendering

* Test updated

* Updates snapshot

app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap

@@ -5,7 +5,6 @@ Object {
   "children": Array [
     <View>
       <View
-        onLayout={[Function]}
         style={null}
       >
         <RNGestureHandlerButton
@@ -102,6 +101,8 @@ Object {
     "data": Anything,
     "getItem": [Function],
     "getItemCount": [Function],
+    "getItemLayout": [Function],
+    "initialNumToRender": 20,
     "invertStickyHeaders": undefined,
     "keyExtractor": [Function],
     "onContentSizeChange": [Function],
@@ -111,12 +112,14 @@ Object {
     "onScroll": [Function],
     "onScrollBeginDrag": [Function],
     "onScrollEndDrag": [Function],
-    "removeClippedSubviews": false,
+    "removeClippedSubviews": true,
     "renderItem": [Function],
     "scrollEventThrottle": 50,
     "stickyHeaderIndices": Array [],
     "style": undefined,
+    "updateCellsBatchingPeriod": 10,
     "viewabilityConfigCallbackPairs": Array [],
+    "windowSize": 15,
   },
   "type": "RCTScrollView",
 }

app/components/channel_list/categories/body/category_body.tsx

@@ -24,6 +24,11 @@ const ChannelItem = ({item}: {item: string}) => {
     );
 };
 
+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)
         <FlatList
             data={data}
             renderItem={ChannelItem}
+            keyExtractor={extractKey}
+            removeClippedSubviews={true}
+            initialNumToRender={20}
+            windowSize={15}
+            updateCellsBatchingPeriod={10}
+            getItemLayout={itemLayout}
         />
     );
 };

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}
         />
     );
 };

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,

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',
+};