fix desktop chatlist jank (#4273)

tloncorp · Dec 10, 2024 · e7e9a30 · e7e9a30
1 parent a0a51e4
commit e7e9a30
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/packages/ui/src/components/ChatList.tsx b/packages/ui/src/components/ChatList.tsx
@@ -7,6 +7,7 @@ import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { LayoutChangeEvent } from 'react-native';
@@ -86,11 +87,33 @@ export const ChatList = React.memo(function ChatListComponent({
     paddingBottom: 100, // bottom nav height + some cushion
   };
 
+  const sizeRefs = useRef({
+    sectionHeader: 28,
+    chatListItem: 72,
+  });
+
+  const handleHeaderLayout = useCallback((e: LayoutChangeEvent) => {
+    sizeRefs.current.sectionHeader = e.nativeEvent.layout.height;
+  }, []);
+
+  const handleItemLayout = useCallback((e: LayoutChangeEvent) => {
+    sizeRefs.current.chatListItem = e.nativeEvent.layout.height;
+  }, []);
+
+  const handleOverrideLayout = useCallback(
+    (layout: { span?: number; size?: number }, item: ChatListItemData) => {
+      layout.size = isSectionHeader(item)
+        ? sizeRefs.current.sectionHeader
+        : sizeRefs.current.chatListItem;
+    },
+    []
+  );
+
   const renderItem: ListRenderItem<ChatListItemData> = useCallback(
     ({ item }) => {
       if (isSectionHeader(item)) {
         return (
-          <SectionListHeader>
+          <SectionListHeader onLayout={handleHeaderLayout}>
             <SectionListHeader.Text>{item.title}</SectionListHeader.Text>
           </SectionListHeader>
         );
@@ -100,6 +123,7 @@ export const ChatList = React.memo(function ChatListComponent({
             model={item}
             onPress={onPressItem}
             onLongPress={handleLongPress}
+            onLayout={handleItemLayout}
           />
         );
       } else {
@@ -108,11 +132,12 @@ export const ChatList = React.memo(function ChatListComponent({
             model={item}
             onPress={onPressItem}
             onLongPress={handleLongPress}
+            onLayout={handleItemLayout}
           />
         );
       }
     },
-    [onPressItem, handleLongPress]
+    [handleHeaderLayout, onPressItem, handleLongPress, handleItemLayout]
   );
 
   const handlePressTryAll = useCallback(() => {
@@ -150,7 +175,8 @@ export const ChatList = React.memo(function ChatListComponent({
           keyExtractor={getChatKey}
           renderItem={renderItem}
           getItemType={getItemType}
-          estimatedItemSize={getTokenValue('$6xl', 'size')}
+          estimatedItemSize={sizeRefs.current.chatListItem}
+          overrideItemLayout={handleOverrideLayout}
         />
       )}
     </>

diff --git a/packages/ui/src/components/ListItem/ListItem.tsx b/packages/ui/src/components/ListItem/ListItem.tsx
@@ -45,6 +45,7 @@ export const ListItemFrame = styled(XStack, {
   justifyContent: 'space-between',
   alignItems: 'stretch',
   backgroundColor: '$transparent',
+  height: '$6xl',
 });
 
 const ListItemIconContainer = styled(View, {