fix: fix tokens list loading state

cowprotocol · Oct 10, 2023 · 418081f · 418081f
1 parent bdf5b73
commit 418081f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/index.tsx
@@ -53,6 +53,7 @@ export function SelectTokenModal(props: SelectTokenModalProps) {
 
   const selectTokenContext: SelectTokenContext = {
     balances: balances[0],
+    balancesLoading: balances[1],
     selectedToken,
     onSelectToken,
     unsupportedTokens,

diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokensVirtualList/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokensVirtualList/index.tsx
@@ -28,7 +28,15 @@ export interface TokensVirtualListProps extends SelectTokenContext {
 }
 
 export function TokensVirtualList(props: TokensVirtualListProps) {
-  const { allTokens, selectedToken, balances, onSelectToken, unsupportedTokens, permitCompatibleTokens } = props
+  const {
+    allTokens,
+    selectedToken,
+    balances,
+    onSelectToken,
+    unsupportedTokens,
+    permitCompatibleTokens,
+    balancesLoading,
+  } = props
   const scrollTimeoutRef = useRef<NodeJS.Timeout>()
   const parentRef = useRef<HTMLDivElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
@@ -65,7 +73,7 @@ export function TokensVirtualList(props: TokensVirtualListProps) {
           const addressLowerCase = token.address.toLowerCase()
           const balance = balances ? balances[token.address] : null
 
-          if (balance?.loading) {
+          if (balance?.loading || balancesLoading) {
             return <styledEl.LoadingRows key={virtualRow.key}>{threeDivs()}</styledEl.LoadingRows>
           }
 

diff --git a/apps/cowswap-frontend/src/modules/tokensList/types.ts b/apps/cowswap-frontend/src/modules/tokensList/types.ts
@@ -4,6 +4,7 @@ import { TokenAmounts } from 'modules/tokens'
 
 export interface SelectTokenContext {
   balances: TokenAmounts | null
+  balancesLoading: boolean
   selectedToken?: string
   onSelectToken(token: TokenWithLogo): void
   unsupportedTokens: { [tokenAddress: string]: { dateAdded: number } }