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