From 148969071294564a3e3f63f4e7ff7e00ab46f7a7 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 23 Jul 2024 14:45:44 -0400
Subject: [PATCH 1/2] Decouple dune balance loading in token selector

---
 packages/ui/src/components/common/TokenSelector.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/common/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector.tsx
index 692498ca..5d848140 100644
--- a/packages/ui/src/components/common/TokenSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector.tsx
@@ -5,6 +5,7 @@ import {
   ChainIcon,
   Flex,
   Input,
+  Skeleton,
   Text
 } from '../primitives/index.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -263,8 +264,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
     tokenBalances
   ])
 
-  const isLoading =
-    isLoadingDuneBalances || isLoadingSuggestedTokens || isLoadingTokenList
+  const isLoading = isLoadingSuggestedTokens || isLoadingTokenList
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const chainFuse = new Fuse(
@@ -530,6 +530,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                         currencyList={list as EnhancedCurrencyList}
                         setCurrencyList={setCurrencyList}
                         selectToken={selectToken}
+                        isLoadingDuneBalances={isLoadingDuneBalances}
                         key={idx}
                       />
                     ) : null
@@ -678,12 +679,14 @@ type CurrencyRowProps = {
   currencyList: EnhancedCurrencyList
   setCurrencyList: (currencyList: EnhancedCurrencyList) => void
   selectToken: (currency: Currency, chainId?: number) => void
+  isLoadingDuneBalances: boolean
 }
 
 const CurrencyRow: FC<CurrencyRowProps> = ({
   currencyList,
   setCurrencyList,
-  selectToken
+  selectToken,
+  isLoadingDuneBalances
 }) => {
   const balance = currencyList.totalBalance
   const decimals =
@@ -760,6 +763,9 @@ const CurrencyRow: FC<CurrencyRowProps> = ({
           </Text>
         ) : null}
       </Flex>
+      {isLoadingDuneBalances && !balance ? (
+        <Skeleton css={{ ml: 'auto', width: 60 }} />
+      ) : null}
       {balance ? (
         <Text color="subtle" style="subtitle3" css={{ ml: 'auto' }}>
           {formatBN(balance, 5, decimals, compactBalance)}

From 00da309a546e6f17e67526b73ae329fd0b7465e0 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 23 Jul 2024 14:46:08 -0400
Subject: [PATCH 2/2] feat: changeset

---
 .changeset/friendly-maps-drum.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-maps-drum.md

diff --git a/.changeset/friendly-maps-drum.md b/.changeset/friendly-maps-drum.md
new file mode 100644
index 00000000..cd3565b7
--- /dev/null
+++ b/.changeset/friendly-maps-drum.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Decouple dune balance loading from token selector