fix: [lw-12345] adjust initial page size for tokens tab (#1719)

Author: vetalcore

apps/browser-extension-wallet/src/hooks/useWalletActivities.ts

@@ -5,7 +5,7 @@ import { WalletActivitiesSlice, useWalletStore } from '@src/stores';
 import noop from 'lodash/noop';
 import { mapWalletActivities } from '@src/stores/slices';
 import { Wallet } from '@lace/cardano';
-import { AssetActivityListProps, useGroupedActivitiesPageSize } from '@lace/core';
+import { AssetActivityListProps, useItemsPageSize } from '@lace/core';
 import { useTxHistoryLoader } from './useTxHistoryLoader';
 
 type UseWalletActivitiesProps = {
@@ -82,7 +82,7 @@ export const useWalletActivitiesPaginated = ({
 
   const cardanoFiatPrice = priceResult?.cardano?.price;
 
-  const pageSize = useGroupedActivitiesPageSize();
+  const pageSize = useItemsPageSize();
 
   const { loadMore: txHistoryLoaderLoadMore, loadedHistory } = useTxHistoryLoader(pageSize);
 

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/Assets.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import isNil from 'lodash/isNil';
 import { Wallet } from '@lace/cardano';
-import { AssetTableProps } from '@lace/core';
+import { AssetTableProps, useItemsPageSize } from '@lace/core';
 import { useObservable } from '@lace/common';
 import { useBalances, useFetchCoinPrice, useRedirection } from '@hooks';
 import { useWalletStore } from '@src/stores';
@@ -34,7 +34,7 @@ import { useIsSmallerScreenWidthThan } from '@hooks/useIsSmallerScreenWidthThan'
 import { BREAKPOINT_SMALL } from '@src/styles/constants';
 import { MidnightEventBanner } from './MidnightEventBanner';
 
-const LIST_CHUNK_SIZE = 12;
+const LIST_ITEM_HEIGHT = 80;
 const SEND_COIN_OUTPUT_ID = 'output1';
 const ASSETS_OTHER_THAN_ADA = 2;
 
@@ -69,9 +69,14 @@ export const Assets = ({ topSection }: AssetsProps): React.ReactElement => {
 
   const [isActivityDetailsOpen, setIsActivityDetailsOpen] = useState(false);
   const [fullAssetList, setFullAssetList] = useState<AssetTableProps['rows']>();
-  const [listItemsAmount, setListItemsAmount] = useState(LIST_CHUNK_SIZE);
+  const pageSize = useItemsPageSize(LIST_ITEM_HEIGHT);
+  const [listItemsAmount, setListItemsAmount] = useState(pageSize);
   const [selectedAssetId, setSelectedAssetId] = useState<string | undefined>();
 
+  useEffect(() => {
+    setListItemsAmount(pageSize);
+  }, [pageSize]);
+
   const assetsInfo = useObservable(inMemoryWallet.assetInfo$);
 
   // Wallet's coin balance in ADA and converted to fiat, including available rewards
@@ -286,7 +291,7 @@ export const Assets = ({ topSection }: AssetsProps): React.ReactElement => {
       isBalanceLoading={isBalanceLoading}
       isLoadingFirstTime={isLoadingFirstTime}
       onRowClick={onAssetRowClick}
-      onTableScroll={() => setListItemsAmount((prevState) => prevState + LIST_CHUNK_SIZE)}
+      onTableScroll={() => setListItemsAmount((prevState) => prevState + pageSize)}
       totalAssets={fullAssetList?.length ?? 0}
     />
   );

packages/core/src/ui/components/Activity/GroupedAssetActivityList.tsx

@@ -8,16 +8,17 @@ import isNumber from 'lodash/isNumber';
 
 const { Text } = Typography;
 
-export const useGroupedActivitiesPageSize = (): number => {
+const ESTIMATED_MIN_GROUP_HEIGHT = 100;
+
+export const useItemsPageSize = (estimatedItemHeight = ESTIMATED_MIN_GROUP_HEIGHT): number => {
   // workaround for bug in react-infinite-scroll-component
   // related to not loading more elements if the height of the container is less than the height of the window
   // see: https://github.com/ankeetmaini/react-infinite-scroll-component/issues/380
   // ticket for proper fix on our end: https://input-output.atlassian.net/browse/LW-8986
   // initialWindowHeight state needed to ensure that page size remains the same if window is resized
   const [initialWindowHeight] = useState(window.innerHeight);
-  const ESTIMATED_MIN_GROUP_HEIGHT = 100;
   // eslint-disable-next-line no-magic-numbers
-  return Math.max(5, Math.floor(initialWindowHeight / ESTIMATED_MIN_GROUP_HEIGHT));
+  return Math.max(5, Math.floor(initialWindowHeight / estimatedItemHeight));
 };
 
 export interface GroupedAssetActivityListProps {

packages/staking/src/features/activity/RewardsHistory.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from '@input-output-hk/lace-ui-toolkit';
-import { AssetActivityListProps, GroupedAssetActivityList, useGroupedActivitiesPageSize } from '@lace/core';
+import { AssetActivityListProps, GroupedAssetActivityList, useItemsPageSize } from '@lace/core';
 import { Skeleton } from 'antd';
 import { StateStatus } from 'features/outside-handles-provider';
 import take from 'lodash/take';
@@ -16,7 +16,7 @@ type RewardsHistoryProps = {
 export const RewardsHistory = ({ groupedRewardsActivities, walletActivitiesStatus }: RewardsHistoryProps) => {
   const { t } = useTranslation();
 
-  const pageSize = useGroupedActivitiesPageSize();
+  const pageSize = useItemsPageSize();
   const [paginatedLists, setPaginatedLists] = useState<AssetActivityListProps[]>([]);
 
   const loadMoreData = useCallback(() => {