fix loading state flashing in pool page

src/components/PositionList/index.tsx

@@ -51,9 +51,8 @@ export default function PositionList({ positions }: PositionListProps) {
         <div>{t('Fees Earned')}</div>
       </DesktopHeader>
       <MobileHeader>Your positions</MobileHeader>
-      {positions.map((p, i) => {
-        const key = `${i}-${p.nonce.toString()} ${p.token0} ${p.token1} ${p.tokensOwed0} ${p.tokensOwed1}`
-        return <PositionListItem key={key} positionDetails={p} />
+      {positions.map((p) => {
+        return <PositionListItem key={p.tokenId.toString()} positionDetails={p} />
       })}
     </>
   )

src/hooks/useDerivedPositionInfo.ts

@@ -3,12 +3,12 @@ import { usePool } from 'hooks/usePools'
 import { PositionDetails } from 'types/position'
 import { useCurrency } from './Tokens'
 
-export const useDerivedPositionInfo = (
+export function useDerivedPositionInfo(
   positionDetails: PositionDetails | undefined
 ): {
   position: Position | undefined
   pool: Pool | undefined
-} => {
+} {
   const currency0 = useCurrency(positionDetails?.token0)
   const currency1 = useCurrency(positionDetails?.token1)
 
@@ -19,7 +19,7 @@ export const useDerivedPositionInfo = (
   if (pool && positionDetails) {
     position = new Position({
       pool,
-      liquidity: positionDetails.liquidity,
+      liquidity: positionDetails.liquidity.toString(),
       tickLower: positionDetails.tickLower,
       tickUpper: positionDetails.tickUpper,
     })

src/hooks/useV3Positions.ts

@@ -6,14 +6,13 @@ import { BigNumber } from '@ethersproject/bignumber'
 
 interface UseV3PositionsResults {
   loading: boolean
-  error: boolean
   positions: PositionDetails[] | undefined
 }
 
 function useV3PositionsFromTokenIds(tokenIds: BigNumber[] | undefined): UseV3PositionsResults {
   const positionManager = useV3NFTPositionManagerContract()
   const inputs = useMemo(() => (tokenIds ? tokenIds.map((tokenId) => [BigNumber.from(tokenId)]) : []), [tokenIds])
-  const results = useSingleContractMultipleData(positionManager ?? undefined, 'positions', inputs)
+  const results = useSingleContractMultipleData(positionManager, 'positions', inputs)
 
   const loading = useMemo(() => results.some(({ loading }) => loading), [results])
   const error = useMemo(() => results.some(({ error }) => error), [results])
@@ -45,14 +44,12 @@ function useV3PositionsFromTokenIds(tokenIds: BigNumber[] | undefined): UseV3Pos
 
   return {
     loading,
-    error,
     positions: positions?.map((position, i) => ({ ...position, tokenId: inputs[i][0] })),
   }
 }
 
 interface UseV3PositionResults {
   loading: boolean
-  error: boolean
   position: PositionDetails | undefined
 }
 
@@ -60,7 +57,6 @@ export function useV3PositionFromTokenId(tokenId: BigNumber | undefined): UseV3P
   const position = useV3PositionsFromTokenIds(tokenId ? [tokenId] : undefined)
   return {
     loading: position.loading,
-    error: position.error,
     position: position.positions?.[0],
   }
 }
@@ -68,11 +64,9 @@ export function useV3PositionFromTokenId(tokenId: BigNumber | undefined): UseV3P
 export function useV3Positions(account: string | null | undefined): UseV3PositionsResults {
   const positionManager = useV3NFTPositionManagerContract()
 
-  const { loading: balanceLoading, error: balanceError, result: balanceResult } = useSingleCallResult(
-    positionManager,
-    'balanceOf',
-    [account ?? undefined]
-  )
+  const { loading: balanceLoading, result: balanceResult } = useSingleCallResult(positionManager, 'balanceOf', [
+    account ?? undefined,
+  ])
 
   // we don't expect any account balance to ever exceed the bounds of max safe int
   const accountBalance: number | undefined = balanceResult?.[0]?.toNumber()
@@ -89,6 +83,7 @@ export function useV3Positions(account: string | null | undefined): UseV3Positio
   }, [account, accountBalance])
 
   const tokenIdResults = useSingleContractMultipleData(positionManager, 'tokenOfOwnerByIndex', tokenIdsArgs)
+  const someTokenIdsLoading = useMemo(() => tokenIdResults.some(({ loading }) => loading), [tokenIdResults])
 
   const tokenIds = useMemo(() => {
     if (account) {
@@ -100,15 +95,10 @@ export function useV3Positions(account: string | null | undefined): UseV3Positio
     return []
   }, [account, tokenIdResults])
 
-  const positionsResults = useV3PositionsFromTokenIds(tokenIds)
-
-  // wrap the return value
-  const loading = balanceLoading || positionsResults.loading
-  const error = balanceError || positionsResults.error
+  const { positions, loading: positionsLoading } = useV3PositionsFromTokenIds(tokenIds)
 
   return {
-    loading: loading || positionsResults.loading,
-    error: error || positionsResults.error,
-    positions: loading || error ? undefined : positionsResults.positions,
+    loading: someTokenIdsLoading || balanceLoading || positionsLoading,
+    positions,
   }
 }

src/pages/Pool/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useContext } from 'react'
 import { ButtonGray, ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import { FlyoutAlignment, NewMenu } from 'components/Menu'
@@ -88,9 +88,9 @@ export default function Pool() {
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
 
-  const { positions } = useV3Positions(account)
+  const { positions, loading: positionsLoading } = useV3Positions(account)
 
-  const hasPositions = useMemo(() => Boolean(positions && positions.length > 0), [positions])
+  const hasPositions = Boolean(positions && positions.length > 0)
 
   const hasV2Liquidity = true
   const showMigrateHeaderLink = Boolean(hasV2Liquidity && hasPositions)
@@ -160,9 +160,24 @@ export default function Pool() {
             </TitleRow>
 
             <MainContentWrapper>
-              {hasPositions && positions ? (
+              {positionsLoading ? (
+                <LoadingRows>
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                </LoadingRows>
+              ) : positions && positions.length > 0 ? (
                 <PositionList positions={positions} />
-              ) : positions && !hasPositions ? (
+              ) : (
                 <NoLiquidity>
                   <TYPE.largeHeader color={theme.text3} textAlign="center">
                     <Inbox />
@@ -186,21 +201,6 @@ export default function Pool() {
                     )
                   )}
                 </NoLiquidity>
-              ) : (
-                <LoadingRows>
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                  <div />
-                </LoadingRows>
               )}
             </MainContentWrapper>
           </AutoColumn>

src/types/position.d.ts

@@ -1,8 +1,8 @@
-import { BigNumberish } from '@ethersproject/bignumber'
+import { BigNumber } from '@ethersproject/bignumber'
 
 export interface PositionDetails {
   nonce: BigNumber
-  tokenId: BigNumberish | undefined
+  tokenId: BigNumber
   operator: string
   token0: string
   token1: string