[GSW-2407] improve UserPositions pagination (#791)

* fix: [GSW-2407] Pagination UI Flickering

* feat: [GSW-2407] add positionIds to queryKey to prevent cache collision

* refactor: [GSW-2407] useMakePoolPositions

Author: tfrg

packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx

@@ -66,7 +66,7 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
   const shouldShowPositions = !isLoading && hasPositions;
   const shouldShowLoadMoreButton = !mobile && !isLoading && showLoadMore && !!onClickLoadMore;
   const shouldShowPositionIndicator = showPositionIndicator && isFetched && hasPositions && !isLoading;
-  const shouldShowPagination = Boolean(totalPage && totalPage > 1 && !loadMore);
+  const shouldShowPagination = Boolean(totalPage && totalPage > 1 && (mobile || !loadMore));
   const targetCount = shouldShowPagination && limit ? limit : maxDisplayCount;
   const shouldShowBlankCards = isFetched && !isLoading && hasPositions && positions.length < maxDisplayCount;
 

packages/web/src/hooks/common/use-loading.tsx

@@ -4,12 +4,9 @@ import { useInitLoading } from "@query/common";
 import { useGetDashboardVolume } from "@query/dashboard";
 import { useGetPoolList } from "@query/pools";
 import { useGetChainInfo } from "@query/token";
-import { useGetPositionsByAddress } from "@query/positions";
-import { useAddress } from "@hooks/common/use-address";
 import { useGetLaunchpadActiveProjects } from "@query/launchpad/use-get-launchpad-active-projects";
 
 export const useLoading = () => {
-  const { address } = useAddress();
   const { data: initialized } = useInitLoading();
   const { isFetched: isFetchedChainData } = useGetChainInfo();
   const { isFetched: isFetchedTokenData, isFetchedTokenPrices } = useTokenData();
@@ -19,15 +16,6 @@ export const useLoading = () => {
     enabled: false,
   });
 
-  const { isFetched: isFetchedPosition } = useGetPositionsByAddress(
-    {
-      address: address || "",
-    },
-    {
-      enabled: false,
-    },
-  );
-
   const { isFetched: isFetchedLaunchpadProjectList } = useGetLaunchpadActiveProjects({ enabled: false });
 
   const isLoading = useMemo(() => {
@@ -80,16 +68,6 @@ export const useLoading = () => {
     return !isFetchedDashboardVolume;
   }, [initialized, isFetchedDashboardVolume]);
 
-  const isLoadingPositions = useMemo(() => {
-    if (!initialized) {
-      return true;
-    }
-    if (!address) {
-      return false;
-    }
-    return !isFetchedPosition;
-  }, [address, initialized, isFetchedPosition]);
-
   const isLoadingLaunchpadProjectList = useMemo(() => {
     if (!initialized) {
       return true;
@@ -105,7 +83,6 @@ export const useLoading = () => {
     isLoadingHighestAPRPools,
     isLoadingChainData,
     isLoadingDashboardStats,
-    isLoadingPositions,
     isLoadingLaunchpadProjectList,
   };
 };

packages/web/src/hooks/pool/data/use-position-data.ts

@@ -30,8 +30,6 @@ export const usePositionData = (options?: UsePositionDataOption) => {
     isError,
     isFetched: isFetchedPosition,
     isLoading: isLoadingPosition,
-    isFetching: isFetchingPosition,
-    isPreviousData,
   } = useGetPositionsByAddress({
     address: fetchedAddress as string,
     isClosed: options?.isClosed,
@@ -102,6 +100,5 @@ export const usePositionData = (options?: UsePositionDataOption) => {
     isFetchedPosition: isFetchedPosition && isFetchedPoolPositions,
     loading,
     isLoadingPool,
-    isPageChanging: isFetchingPosition && isPreviousData,
   };
 };

packages/web/src/layouts/earn/components/earn-my-positions/EarnMyPositions.tsx

@@ -18,6 +18,7 @@ export interface EarnMyPositionsProps {
   connected: boolean;
   fetched: boolean;
   loading: boolean;
+  loadingPositionCardList: boolean;
   isError: boolean;
   positions: PoolPositionModel[];
   isSwitchNetwork: boolean;
@@ -60,6 +61,7 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
   connect,
   fetched,
   loading,
+  loadingPositionCardList,
   isError,
   positions,
   moveEarnAdd,
@@ -112,6 +114,7 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
       connect={connect}
       fetched={fetched}
       loading={loading}
+      loadingPositionCardList={loadingPositionCardList}
       isError={isError}
       positions={positions}
       movePoolDetail={movePoolDetail}

packages/web/src/layouts/earn/components/earn-my-positions/earn-my-positions-content/EarnMyPositionsContent.tsx

@@ -15,6 +15,7 @@ export interface EarnMyPositionContentProps {
   connected: boolean;
   fetched: boolean;
   loading: boolean;
+  loadingPositionCardList: boolean;
   isError: boolean;
   positions: PoolPositionModel[];
   connect: () => void;
@@ -46,6 +47,7 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
   connected,
   fetched,
   loading,
+  loadingPositionCardList,
   positions,
   connect,
   movePoolDetail,
@@ -85,7 +87,7 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
       address={address}
       positions={positions}
       isFetched={fetched}
-      isLoading={loading}
+      isLoading={loadingPositionCardList}
       currentIndex={currentIndex}
       maxDisplayCount={maxDisplayCount}
       movePoolDetail={movePoolDetail}

packages/web/src/layouts/earn/containers/earn-my-position-container/EarnMyPositionContainer.tsx

@@ -136,7 +136,7 @@ const EarnMyPositionContainer: React.FC<EarnMyPositionContainerProps> = ({
 
   const showedPosition = useMemo(() => {
     return [...openPosition, ...(isClosed ? closedPosition : [])];
-  }, [closedPosition, isClosed, openPosition]);
+  }, [closedPosition, isClosed, openPosition, limit]);
 
   const handleScroll = useCallback(() => {
     if (divRef.current) {
@@ -275,7 +275,7 @@ const EarnMyPositionContainer: React.FC<EarnMyPositionContainerProps> = ({
 
     setMappedData(convertedMappedData);
     setIsDataMappingLoading(false);
-  }, [isViewMorePositions, width, showedPosition]);
+  }, [isViewMorePositions, width, showedPosition, limit]);
 
   useEffect(() => {
     updateDataMapping();
@@ -315,6 +315,10 @@ const EarnMyPositionContainer: React.FC<EarnMyPositionContainerProps> = ({
     setPage(1);
   }, [isClosed]);
 
+  const loadingPositionCardList = useMemo(() => {
+    return isLoadingPool || isLoadingPosition || isDataMappingLoading;
+  }, [isLoadingPool, isLoadingPosition, isDataMappingLoading]);
+
   return (
     <EarnMyPositions
       address={address}
@@ -326,6 +330,7 @@ const EarnMyPositionContainer: React.FC<EarnMyPositionContainerProps> = ({
       availableStake={availableStake}
       connect={connect}
       loading={isLoadingPool || (connected ? isLoadingPosition || !isFetchedPosition : false) || isDataMappingLoading}
+      loadingPositionCardList={loadingPositionCardList}
       fetched={isFetchedPools && isFetchedPosition}
       isError={isError}
       positions={mappedData}

packages/web/src/layouts/earn/containers/incentivized-pool-card-list-container/IncentivizedPoolCardListContainer.tsx

@@ -38,7 +38,7 @@ const IncentivizedPoolCardListContainer: React.FC = () => {
   const themeKey = useAtomValue(ThemeState.themeKey);
   const divRef = useRef<HTMLDivElement | null>(null);
   const { width } = useWindowSize();
-  const { loading: isLoadingPosition, checkStakedPool } = usePositionData();
+  const { checkStakedPool } = usePositionData();
 
   const incentivizePoolList: IncentivizePoolCardInfoWithPriceGrade[] = React.useMemo(() => {
     return incentivizePools.map(pool => {
@@ -191,7 +191,7 @@ const IncentivizedPoolCardListContainer: React.FC = () => {
       onScroll={handleScroll}
       showPagination={showPagination}
       width={width}
-      isLoading={isLoadingIncentivizedPool || isLoadingPosition}
+      isLoading={isLoadingIncentivizedPool}
       checkStakedPool={checkStakedPool}
     />
   );

packages/web/src/layouts/portfolio/containers/wallet-position-card-list-container/WalletPositionCardListContainer.tsx

@@ -127,7 +127,7 @@ const WalletPositionCardListContainer: React.FC<{ isClosed: boolean }> = ({ isCl
 
   const showedPosition = useMemo(() => {
     return [...openPosition, ...(isClosed ? closedPosition : [])];
-  }, [closedPosition, isClosed, openPosition]);
+  }, [closedPosition, isClosed, openPosition, limit]);
 
   const handleScroll = useCallback(() => {
     if (divRef.current) {
@@ -233,7 +233,7 @@ const WalletPositionCardListContainer: React.FC<{ isClosed: boolean }> = ({ isCl
 
     setMappedData(convertedMappedData);
     setIsDataMappingLoading(false);
-  }, [isViewMorePositions, width, showedPosition]);
+  }, [isViewMorePositions, width, showedPosition, limit]);
 
   useEffect(() => {
     updateDataMapping();

packages/web/src/react-query/positions/use-make-pool-positions.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 import { GNOT_TOKEN } from "@common/values/token-constant";
@@ -15,8 +16,18 @@ export const useMakePoolPositions = (
   isFetchedPosition: boolean,
   options?: UseQueryOptions<PoolPositionModel[], Error>,
 ) => {
+  const positionIdArray = useMemo(() => {
+    if (!positions || positions.length === 0) return [];
+    return positions.map(position => position.id);
+  }, [positions]);
+
+  const positionIds = useMemo(() => {
+    if (positionIdArray.length === 0) return "";
+    return [...positionIdArray].sort((a, b) => a - b).join(",");
+  }, [positionIdArray]);
+
   const query = useQuery<PoolPositionModel[], Error>({
-    queryKey: [QUERY_KEY.poolPositions],
+    queryKey: [QUERY_KEY.poolPositions, positionIds],
     queryFn: async () => {
       return new Promise(resolve => {
         const poolPositions: PoolPositionModel[] = [];