[Performance] Improve virtualization, remove some not-visible items from the dom

packages/components/src/components/cards/EventCards.tsx

@@ -283,14 +283,16 @@ export const EventCards = React.memo((props: EventCardsProps) => {
       bounces
       data={events}
       extraData={rerender}
-      initialNumToRender={10}
+      initialNumToRender={props.cardViewMode === 'compact' ? 15 : 5}
       keyExtractor={keyExtractor}
+      maxToRenderPerBatch={props.cardViewMode === 'compact' ? 15 : 5}
       onScrollToIndexFailed={onScrollToIndexFailed}
       onViewableItemsChanged={handleViewableItemsChanged}
       refreshControl={refreshControl}
       removeClippedSubviews
       renderItem={renderItem}
       viewabilityConfig={viewabilityConfig}
+      windowSize={2}
     />
   )
 })

packages/components/src/components/cards/NotificationCards.tsx

@@ -287,14 +287,16 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
       bounces
       data={notifications}
       extraData={rerender}
-      initialNumToRender={10}
+      initialNumToRender={props.cardViewMode === 'compact' ? 15 : 5}
       keyExtractor={keyExtractor}
+      maxToRenderPerBatch={props.cardViewMode === 'compact' ? 15 : 5}
       onScrollToIndexFailed={onScrollToIndexFailed}
       onViewableItemsChanged={handleViewableItemsChanged}
       refreshControl={refreshControl}
       removeClippedSubviews
       renderItem={renderItem}
       viewabilityConfig={viewabilityConfig}
+      windowSize={2}
     />
   )
 })

packages/components/src/components/columns/Columns.tsx

@@ -162,11 +162,13 @@ export const Columns = React.memo((props: ColumnsProps) => {
       horizontal
       initialNumToRender={4}
       keyExtractor={keyExtractor}
+      maxToRenderPerBatch={4}
       onScrollToIndexFailed={onScrollToIndexFailed}
       onViewableItemsChanged={onViewableItemsChanged}
       pagingEnabled={pagingEnabled}
       removeClippedSubviews
       scrollEnabled={!swipeable}
+      windowSize={3}
       {...otherProps}
       renderItem={renderItem}
       style={flatListStyle}