fix: remove no tokens state and replace w loading (#4847)

* remove no tokens state and replace w loading

* update snapshot

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -212,12 +212,74 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 
 exports[`renders loading rows when isLoading is true 1`] = `
 <DocumentFragment>
-  <div
+  .c0 {
+  display: grid;
+}
+
+.c0 > div {
+  -webkit-animation: fAQEyV 1.5s infinite;
+  animation: fAQEyV 1.5s infinite;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  background: linear-gradient( to left,#F7F8FA 25%,#EDEEF2 50%,#F7F8FA 75% );
+  background-size: 400%;
+  border-radius: 12px;
+  height: 2.4em;
+  will-change: background-position;
+}
+
+.c1 {
+  grid-column-gap: 0.5em;
+  grid-template-columns: repeat(12,1fr);
+  max-width: 960px;
+  padding: 12px 20px;
+}
+
+.c1 > div:nth-child(4n + 1) {
+  grid-column: 1 / 8;
+  height: 1em;
+  margin-bottom: 0.25em;
+}
+
+.c1 > div:nth-child(4n + 2) {
+  grid-column: 12;
+  height: 1em;
+  margin-top: 0.25em;
+}
+
+.c1 > div:nth-child(4n + 3) {
+  grid-column: 1 / 4;
+  height: 0.75em;
+}
+
+<div
     style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
   >
     <div
-      style="height: 0px; width: 100%;"
-    />
+      style="height: 560px; width: 100%;"
+    >
+      <div
+        class="c0 c1"
+      >
+        <div />
+        <div />
+        <div />
+      </div>
+      <div
+        class="c0 c1"
+      >
+        <div />
+        <div />
+        <div />
+      </div>
+      <div
+        class="c0 c1"
+      >
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

src/components/SearchModal/CurrencyList/index.tsx

@@ -227,6 +227,14 @@ export const formatAnalyticsEventProperties = (
     : { search_token_address_input: isAddressSearch }),
 })
 
+const LoadingRow = () => (
+  <LoadingRows>
+    <div />
+    <div />
+    <div />
+  </LoadingRows>
+)
+
 export default function CurrencyList({
   height,
   currencies,
@@ -272,13 +280,7 @@ export default function CurrencyList({
       const token = currency?.wrapped
 
       if (isLoading) {
-        return (
-          <LoadingRows>
-            <div />
-            <div />
-            <div />
-          </LoadingRows>
-        )
+        return LoadingRow()
       } else if (currency) {
         return (
           <CurrencyRow
@@ -303,7 +305,11 @@ export default function CurrencyList({
     return currencyKey(currency)
   }, [])
 
-  return (
+  return isLoading ? (
+    <FixedSizeList height={height} ref={fixedListRef as any} width="100%" itemData={[]} itemCount={10} itemSize={56}>
+      {LoadingRow}
+    </FixedSizeList>
+  ) : (
     <FixedSizeList
       height={height}
       ref={fixedListRef as any}

src/components/SearchModal/CurrencySearch.tsx

@@ -107,11 +107,12 @@ export function CurrencySearch({
     return Object.values(allTokens).filter(getTokenFilter(debouncedQuery))
   }, [allTokens, debouncedQuery])
 
-  const [balances, balancesIsLoading] = useAllTokenBalances()
+  const [balances, balancesAreLoading] = useAllTokenBalances()
   const sortedTokens: Token[] = useMemo(
-    () => (!balancesIsLoading ? [...filteredTokens].sort(tokenComparator.bind(null, balances)) : []),
-    [balances, filteredTokens, balancesIsLoading]
+    () => (!balancesAreLoading ? [...filteredTokens].sort(tokenComparator.bind(null, balances)) : []),
+    [balances, filteredTokens, balancesAreLoading]
   )
+  const isLoading = Boolean(balancesAreLoading && !tokenLoaderTimerElapsed)
 
   const filteredSortedTokens = useSortTokensByQuery(debouncedQuery, sortedTokens)
 
@@ -241,7 +242,7 @@ export function CurrencySearch({
               )}
             />
           </Column>
-        ) : filteredSortedTokens?.length > 0 || filteredInactiveTokens?.length > 0 ? (
+        ) : filteredSortedTokens?.length > 0 || filteredInactiveTokens?.length > 0 || isLoading ? (
           <div style={{ flex: '1' }}>
             <AutoSizer disableWidth>
               {({ height }) => (
@@ -254,7 +255,7 @@ export function CurrencySearch({
                   selectedCurrency={selectedCurrency}
                   fixedListRef={fixedList}
                   showCurrencyAmount={showCurrencyAmount}
-                  isLoading={balancesIsLoading && !tokenLoaderTimerElapsed}
+                  isLoading={isLoading}
                   searchQuery={searchQuery}
                   isAddressSearch={isAddressSearch}
                 />