Merge pull request #20026 from brave/select-send-loading-skeletons

fix(wallet): Select Send Loading Skeletons

components/brave_wallet_ui/page/screens/send/components/select-token-modal/select-token-modal.tsx

@@ -55,6 +55,12 @@ import CloseIcon from '../../../../../assets/svg-icons/close.svg'
 
 // Components
 import { TokenListItem } from '../token-list-item/token-list-item'
+import {
+  TokenListItemSkeleton
+} from '../token-list-item/token_list_item_skeleton'
+import {
+  LoadingSkeleton
+} from '../../../../../components/shared/loading-skeleton/index'
 import { NetworkFilterWithSearch } from '../../../../../components/desktop/network-filter-with-search'
 
 // Styled Components
@@ -265,8 +271,12 @@ export const SelectTokenModal = React.forwardRef<HTMLDivElement, Props>(
 
     // Memos
     const emptyTokensList = React.useMemo(() => {
-      return accounts.map((account) => getTokensBySearchValue(account)).flat(1).length === 0
-    }, [accounts, getTokensBySearchValue])
+      return !isLoadingBalances &&
+        accounts.map(
+          (account) =>
+            getTokensBySearchValue(account)
+        ).flat(1).length === 0
+    }, [accounts, getTokensBySearchValue, isLoadingBalances])
 
     const modalTitle = React.useMemo(() => {
       if (selectedSendOption === SendPageTabHashes.nft) {
@@ -276,6 +286,26 @@ export const SelectTokenModal = React.forwardRef<HTMLDivElement, Props>(
     }, [selectedSendOption])
 
     const tokensByAccount = React.useMemo(() => {
+      if (isLoadingBalances) {
+        return (
+          <Column columnWidth='full'>
+            <AccountSection
+              rowWidth='full'
+              verticalPadding={9}
+              horizontalPadding={16}
+            >
+              <LoadingSkeleton width={80} height={14} />
+            </AccountSection>
+            <Column
+              columnWidth='full'
+              horizontalPadding={8}>
+              <TokenListItemSkeleton
+                isNFT={selectedSendOption === SendPageTabHashes.nft}
+              />
+            </Column>
+          </Column>
+        )
+      }
       if (emptyTokensList) {
         return <Text textSize='14px' isBold={false} textColor='text03'>
           {getLocale('braveWalletNoAvailableTokens')}
@@ -332,7 +362,8 @@ export const SelectTokenModal = React.forwardRef<HTMLDivElement, Props>(
       getAccountFiatValue,
       emptyTokensList,
       selectedSendOption,
-      tokenBalancesRegistry
+      tokenBalancesRegistry,
+      isLoadingBalances
     ])
 
     // render

components/brave_wallet_ui/page/screens/send/components/token-list-item/token_list_item_skeleton.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+// Styled Components
+import {
+  Row,
+  Column,
+  VerticalSpace,
+  HorizontalSpace
+} from '../../../../../components/shared/style'
+import {
+  LoadingSkeleton
+} from '../../../../../components/shared/loading-skeleton/index'
+
+interface Props {
+  isNFT: boolean
+}
+
+export const TokenListItemSkeleton = (props: Props) => {
+  const { isNFT } = props
+  return (
+    <Row
+      padding='8px 12px'
+      justifyContent='space-between'
+    >
+      <Row
+        width='unset'
+      >
+        <LoadingSkeleton
+          circle={true}
+          width={40}
+          height={40}
+        />
+        <HorizontalSpace space='16px' />
+        <Column
+          alignItems='flex-start'
+        >
+          <LoadingSkeleton width={isNFT ? 120 : 80} height={18} />
+          <VerticalSpace space='2px' />
+          <LoadingSkeleton width={120} height={18} />
+        </Column>
+      </Row>
+      {!isNFT &&
+        <Column
+          alignItems='flex-end'
+        >
+          <LoadingSkeleton width={60} height={18} />
+          <VerticalSpace space='2px' />
+          <LoadingSkeleton width={40} height={18} />
+        </Column>
+      }
+    </Row>
+  )
+}
+
+export default TokenListItemSkeleton