ui improments

showtime-xyz · Nov 7, 2023 · c832239 · c832239
1 parent f089062
commit c832239
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/app/components/creator-token/creator-token-users.tsx b/packages/app/components/creator-token/creator-token-users.tsx
@@ -296,10 +296,10 @@ export const TopCreatorTokenListItem = ({
                 >
                   {item.owner_profile?.name}
                 </Text>
-                <View tw="h-1" />
+                <View tw="h-2" />
                 <Text
                   tw="text-xs text-gray-500 dark:text-gray-400"
-                  numberOfLines={1}
+                  numberOfLines={3}
                 >
                   {item.owner_profile?.bio}
                 </Text>

diff --git a/packages/app/components/creator-token/top-creator-token.tsx b/packages/app/components/creator-token/top-creator-token.tsx
@@ -115,7 +115,7 @@ export const TopCreatorTokens = ({
         contentContainerStyle={{
           paddingHorizontal: 12,
         }}
-        overscan={12}
+        overscan={20}
         ListHeaderComponent={Header}
         containerTw="px-4"
         onEndReached={disableFetchMore ? () => {} : fetchMore}

diff --git a/packages/app/hooks/creator-token/use-creator-tokens.ts b/packages/app/hooks/creator-token/use-creator-tokens.ts
@@ -94,12 +94,13 @@ export const useTopCreatorToken = (limit: number = 15) => {
     [limit]
   );
 
-  const { data, ...queryState } = useInfiniteListQuerySWR<TopCreatorToken>(
-    fetchUrl,
-    {
-      pageSize: limit,
-    }
-  );
+  const {
+    data,
+    fetchMore: fetchMoreData,
+    ...queryState
+  } = useInfiniteListQuerySWR<TopCreatorToken>(fetchUrl, {
+    pageSize: limit,
+  });
 
   const newData = useMemo(() => {
     let newData: TopCreatorToken["creator_tokens"] = [];
@@ -112,8 +113,15 @@ export const useTopCreatorToken = (limit: number = 15) => {
     }
     return newData;
   }, [data]);
+
+  const fetchMore = useCallback(() => {
+    if (newData.length >= 100) return;
+    fetchMoreData();
+  }, [fetchMoreData, newData.length]);
+
   return {
     ...queryState,
+    fetchMore,
     data: newData,
   };
 };