Improve loading state for external tokens

reservoirprotocol · Oct 23, 2024 · a73cfa3 · a73cfa3
1 parent 631f997
commit a73cfa3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
@@ -165,25 +165,26 @@ const TokenSelector: FC<TokenSelectorProps> = ({
     }
   )
 
-  const { data: externalTokenList } = useTokenList(
-    relayClient?.baseApiUrl,
-    {
-      chainIds: chainFilter.id ? [chainFilter.id] : configuredChainIds,
-      address: isAddress(debouncedTokenSearchValue)
-        ? debouncedTokenSearchValue
-        : undefined,
-      term: !isAddress(debouncedTokenSearchValue)
-        ? debouncedTokenSearchValue
-        : undefined,
-      defaultList: false,
-      limit: 20,
-      ...(tokenListQuery ? { tokens: tokenListQuery } : {}),
-      useExternalSearch: true
-    },
-    {
-      enabled: !!debouncedTokenSearchValue
-    }
-  )
+  const { data: externalTokenList, isLoading: isLoadingExternalTokenList } =
+    useTokenList(
+      relayClient?.baseApiUrl,
+      {
+        chainIds: chainFilter.id ? [chainFilter.id] : configuredChainIds,
+        address: isAddress(debouncedTokenSearchValue)
+          ? debouncedTokenSearchValue
+          : undefined,
+        term: !isAddress(debouncedTokenSearchValue)
+          ? debouncedTokenSearchValue
+          : undefined,
+        defaultList: false,
+        limit: 20,
+        ...(tokenListQuery ? { tokens: tokenListQuery } : {}),
+        useExternalSearch: true
+      },
+      {
+        enabled: !!debouncedTokenSearchValue
+      }
+    )
 
   const {
     data: duneTokens,
@@ -562,6 +563,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                 chainFilter={chainFilter}
                 setChainFilter={setChainFilter}
                 isLoading={isLoading}
+                isLoadingExternalTokenList={isLoadingExternalTokenList}
                 isLoadingDuneBalances={isLoadingDuneBalances}
                 enhancedCurrencyList={
                   enhancedCurrencyList as EnhancedCurrencyList[]

diff --git a/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx b/packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx
@@ -49,6 +49,7 @@ type SetCurrencyProps = {
   chainFilter: ChainFilterValue
   setChainFilter: (value: React.SetStateAction<ChainFilterValue>) => void
   isLoading: boolean
+  isLoadingExternalTokenList: boolean
   isLoadingDuneBalances: boolean
   enhancedCurrencyList?: EnhancedCurrencyList[]
   token?: Token
@@ -77,6 +78,7 @@ export const SetCurrencyStep: FC<SetCurrencyProps> = ({
   chainFilter,
   setChainFilter,
   isLoading,
+  isLoadingExternalTokenList,
   isLoadingDuneBalances,
   enhancedCurrencyList,
   selectToken,
@@ -401,6 +403,7 @@ export const SetCurrencyStep: FC<SetCurrencyProps> = ({
                 />
               </Flex>
             ) : null}
+
             {/* Data State */}
             {!isLoading &&
             enhancedCurrencyList &&
@@ -429,8 +432,25 @@ export const SetCurrencyStep: FC<SetCurrencyProps> = ({
                   }
                 })
               : null}
+
+            {/* External Token List Loading State */}
+            {!isLoading && isLoadingExternalTokenList ? (
+              <Flex direction="column" align="center" css={{ py: '5' }}>
+                {enhancedCurrencyList && enhancedCurrencyList?.length > 0 ? (
+                  <Text style="subtitle2" css={{ color: 'primary-color' }}>
+                    Searching for additional tokens...
+                  </Text>
+                ) : (
+                  <LoadingSpinner
+                    css={{ height: 40, width: 40, fill: 'primary-color' }}
+                  />
+                )}
+              </Flex>
+            ) : null}
+
             {/* Empty State */}
             {!isLoading &&
+            !isLoadingExternalTokenList &&
             (!enhancedCurrencyList || enhancedCurrencyList?.length === 0) ? (
               <Text css={{ textAlign: 'center', py: '5' }}>
                 No results found.