Replace Placeholder with Skeleton

0xsequence · May 7, 2024 · 1758141 · 1758141
1 parent b5e6d91
commit 1758141
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 85 deletions.
diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Card, Image, Text, Placeholder } from '@0xsequence/design-system'
+import { Box, Card, Image, Text, Skeleton } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
 import { CoinIcon } from '../../../shared/components/CoinIcon'
 
@@ -71,13 +71,13 @@ export const OrderSummarySkeleton = () => {
   return (
     <Card flexDirection="row" alignItems="flex-start" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="2">
-        <Placeholder style={{ width: '80px', height: '80px' }} />
+        <Skeleton style={{ width: '80px', height: '80px' }} />
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
-          <Placeholder style={{ width: '100px', height: '14px' }} />
-          <Placeholder style={{ width: '180px', height: '34px' }} />
+          <Skeleton style={{ width: '100px', height: '14px' }} />
+          <Skeleton style={{ width: '180px', height: '34px' }} />
         </Box>
       </Box>
-      <Placeholder style={{ width: '14px', height: '14px' }} />
+      <Skeleton style={{ width: '14px', height: '14px' }} />
     </Card>
   )
 }
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -7,11 +7,10 @@ import {
   Divider,
   HelpIcon,
   Text,
-  TooltipPrimitive,
   Tooltip,
   PaymentsIcon,
   vars,
-  Placeholder
+  Skeleton
 } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
 
@@ -159,7 +158,7 @@ export const CheckoutSelection = () => {
             Total
           </Text>
           {isPending ? (
-            <Placeholder style={{ width: '100px', height: '17px' }} />
+            <Skeleton style={{ width: '100px', height: '17px' }} />
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
               <CoinIcon imageUrl={coinImageUrl} size={12} />
@@ -220,7 +219,7 @@ export const CheckoutSelection = () => {
       {displayCryptoCheckout && (
         <Box width="full" justifyContent="flex-end">
           {isPending ? (
-            <Placeholder style={{ width: '102px', height: '14px' }} />
+            <Skeleton style={{ width: '102px', height: '14px' }} />
           ) : (
             <Text fontWeight="bold" fontSize="small" color="text50">
               Balance: {`${formatDisplay(userBalance)} ${coinSymbol}`}

diff --git a/packages/kit/src/components/TxnDetails/index.tsx b/packages/kit/src/components/TxnDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, GradientAvatar, Placeholder, Text } from '@0xsequence/design-system'
+import { Box, Card, GradientAvatar, Skeleton, Text } from '@0xsequence/design-system'
 
 import React, { useEffect, useState } from 'react'
 
@@ -24,15 +24,15 @@ export const TxnDetailsSkeleton = () => {
   return (
     <Box alignItems="center" justifyContent="space-between">
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
+        <Skeleton style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Placeholder style={{ width: 100, height: 14 }} />
-          <Placeholder style={{ width: 75, height: 14 }} />
+          <Skeleton style={{ width: 100, height: 14 }} />
+          <Skeleton style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Placeholder style={{ width: 100, height: 14 }} />
-        <Placeholder style={{ width: 50, height: 12 }} />
+        <Skeleton style={{ width: 100, height: 14 }} />
+        <Skeleton style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )

diff --git a/packages/wallet/src/shared/CoinRow.tsx b/packages/wallet/src/shared/CoinRow.tsx
@@ -1,7 +1,6 @@
-import { Box, Image, Placeholder, Text, vars } from '@0xsequence/design-system'
-
 import React from 'react'
 import { ethers } from 'ethers'
+import { Box, Skeleton, Text } from '@0xsequence/design-system'
 
 import { CoinIcon } from './CoinIcon'
 import { formatDisplay, getPercentageColor } from '../utils'
@@ -28,15 +27,15 @@ export const CoinRowSkeleton = () => {
       paddingX="3"
     >
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
+        <Skeleton style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Placeholder style={{ width: 100, height: 14 }} />
-          <Placeholder style={{ width: 75, height: 14 }} />
+          <Skeleton style={{ width: 100, height: 14 }} />
+          <Skeleton style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Placeholder style={{ width: 100, height: 14 }} />
-        <Placeholder style={{ width: 50, height: 12 }} />
+        <Skeleton style={{ width: 100, height: 14 }} />
+        <Skeleton style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )

diff --git a/packages/wallet/src/shared/SendItemInfo.tsx b/packages/wallet/src/shared/SendItemInfo.tsx
@@ -1,9 +1,7 @@
-import { Box, Placeholder, Text } from '@0xsequence/design-system'
-
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-
+import { Box, Skeleton, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
 import { CoinIcon } from './CoinIcon'
@@ -26,15 +24,15 @@ export const SendItemInfoSkeleton = () => {
   return (
     <Box alignItems="center" justifyContent="space-between">
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
+        <Skeleton style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Placeholder style={{ width: 100, height: 14 }} />
-          <Placeholder style={{ width: 75, height: 14 }} />
+          <Skeleton style={{ width: 100, height: 14 }} />
+          <Skeleton style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Placeholder style={{ width: 100, height: 14 }} />
-        <Placeholder style={{ width: 50, height: 12 }} />
+        <Skeleton style={{ width: 100, height: 14 }} />
+        <Skeleton style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )

diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -3,17 +3,7 @@ import { TokenPrice } from '@0xsequence/api'
 import { ethers } from 'ethers'
 import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer'
 import { getNativeTokenInfoByChainId, useCoinPrices, useExchangeRate } from '@0xsequence/kit'
-import {
-  ArrowRightIcon,
-  Box,
-  Text,
-  Image,
-  SendIcon,
-  ReceiveIcon,
-  TransactionIcon,
-  vars,
-  Placeholder
-} from '@0xsequence/design-system'
+import { ArrowRightIcon, Box, Text, Image, TransactionIcon, vars, Skeleton } from '@0xsequence/design-system'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
 
@@ -169,7 +159,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
                 {tokenLogoUri && <Image src={tokenLogoUri} width="5" alt="token logo" />}
                 {getTransferAmountLabel(formatDisplay(amountValue), symbol, transfer.transferType)}
               </Box>
-              {isPending && <Placeholder style={{ width: '35px', height: '20px' }} />}
+              {isPending && <Skeleton style={{ width: '35px', height: '20px' }} />}
               {fiatConversionRate && (
                 <Text fontWeight="medium" fontSize="normal" color="text50">
                   {`${fiatCurrency.sign}${(Number(amountValue) * fiatConversionRate * conversionRate).toFixed(2)}`}

diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistorySkeleton.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistorySkeleton.tsx
@@ -1,25 +1,25 @@
 import React from 'react'
-import { Text, Box, Placeholder } from '@0xsequence/design-system'
+import { Box, Skeleton } from '@0xsequence/design-system'
 
 export const TransactionHistorySkeleton = () => {
   const getTransactionItem = () => {
     return (
       <Box flexDirection="column" gap="2" width="full" justifyContent="space-between">
         <Box flexDirection="row" justifyContent="space-between">
-          <Placeholder style={{ width: '65px', height: '20px' }} />
-          <Placeholder style={{ width: '75px', height: '17px' }} />
+          <Skeleton style={{ width: '65px', height: '20px' }} />
+          <Skeleton style={{ width: '75px', height: '17px' }} />
         </Box>
         <Box flexDirection="row" justifyContent="space-between">
-          <Placeholder style={{ width: '120px', height: '20px' }} />
-          <Placeholder style={{ width: '35px', height: '17px' }} />
+          <Skeleton style={{ width: '120px', height: '20px' }} />
+          <Skeleton style={{ width: '35px', height: '17px' }} />
         </Box>
       </Box>
     )
   }
 
   return (
     <Box flexDirection="column" gap="3">
-      <Placeholder style={{ width: '70px', height: '17px' }} />
+      <Skeleton style={{ width: '70px', height: '17px' }} />
       <Box flexDirection="column" gap="2">
         {Array(8)
           .fill(null)

diff --git a/packages/wallet/src/views/CoinDetails/Skeleton.tsx b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Button, Placeholder, SendIcon, Text } from '@0xsequence/design-system'
+import { Box, Button, SendIcon, Skeleton, Text } from '@0xsequence/design-system'
 
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 import { NetworkBadge } from '../../shared/NetworkBadge'
@@ -18,17 +18,17 @@ export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box flexDirection="column" gap="10" paddingBottom="5" paddingX="4" paddingTop="0" style={{ marginTop: '-20px' }}>
         <Box marginBottom="10" gap="2" alignItems="center" justifyContent="center" flexDirection="column">
-          <Placeholder style={{ width: '32px', height: '32px' }} />
-          <Placeholder style={{ height: '24px', width: '70px' }} />
+          <Skeleton style={{ width: '32px', height: '32px' }} />
+          <Skeleton style={{ height: '24px', width: '70px' }} />
           <NetworkBadge chainId={chainId} />
         </Box>
         <Box>
           <Text fontWeight="medium" color="text50" fontSize="normal">
             Balance
           </Text>
           <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-            <Placeholder style={{ width: '150px', height: '36px' }} />
-            <Placeholder style={{ width: '33px', height: '17px' }} />
+            <Skeleton style={{ width: '150px', height: '36px' }} />
+            <Skeleton style={{ width: '33px', height: '17px' }} />
           </Box>
         </Box>
         <Button

diff --git a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Button, Placeholder, SendIcon, Text } from '@0xsequence/design-system'
+import { Box, Button, SendIcon, Skeleton, Text } from '@0xsequence/design-system'
 
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 
@@ -22,11 +22,11 @@ export const CollectibleDetailsSkeleton = () => {
         }}
       >
         <Box gap="3" alignItems="center" justifyContent="center" flexDirection="column">
-          <Placeholder style={{ width: '120px', height: '30px' }} />
-          <Placeholder style={{ width: '140px', height: '40px' }} />
+          <Skeleton style={{ width: '120px', height: '30px' }} />
+          <Skeleton style={{ width: '140px', height: '40px' }} />
         </Box>
         <Box>
-          <Placeholder style={{ width: '347px', height: '347px' }} />
+          <Skeleton style={{ width: '347px', height: '347px' }} />
         </Box>
         <Box>
           {/* balance */}
@@ -35,8 +35,8 @@ export const CollectibleDetailsSkeleton = () => {
               Balance
             </Text>
             <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-              <Placeholder style={{ width: '44px', height: '36px' }} />
-              <Placeholder style={{ width: '34px', height: '17px' }} />
+              <Skeleton style={{ width: '44px', height: '36px' }} />
+              <Skeleton style={{ width: '34px', height: '17px' }} />
             </Box>
           </Box>
           <Button

diff --git a/packages/wallet/src/views/CollectionDetails/Skeleton.tsx b/packages/wallet/src/views/CollectionDetails/Skeleton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Placeholder, vars } from '@0xsequence/design-system'
+import { Box, Skeleton, vars } from '@0xsequence/design-system'
 
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
@@ -23,13 +23,13 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
       gap="10"
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
-        <Placeholder style={{ width: '32px', height: '32px' }} />
-        <Placeholder style={{ width: '100px', height: '24px' }} />
+        <Skeleton style={{ width: '32px', height: '32px' }} />
+        <Skeleton style={{ width: '100px', height: '24px' }} />
         <NetworkBadge chainId={chainId} />
-        <Placeholder style={{ width: '142px', height: '17px' }} />
+        <Skeleton style={{ width: '142px', height: '17px' }} />
       </Box>
       <Box width="full">
-        <Placeholder style={{ width: '168px', height: '20px' }} />
+        <Skeleton style={{ width: '168px', height: '20px' }} />
         <Box
           style={{
             display: 'grid',
@@ -42,7 +42,7 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
           {Array(8)
             .fill(null)
             .map((_, i) => (
-              <Placeholder key={i} width="full" aspectRatio="1/1" />
+              <Skeleton key={i} width="full" aspectRatio="1/1" />
             ))}
         </Box>
       </Box>

diff --git a/packages/wallet/src/views/Home/components/AssetSummary/SkeletonTiles.tsx b/packages/wallet/src/views/Home/components/AssetSummary/SkeletonTiles.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Placeholder, vars } from '@0xsequence/design-system'
+import { Box, Skeleton, vars } from '@0xsequence/design-system'
 
 export const SkeletonTiles = () => {
   return (
@@ -14,7 +14,7 @@ export const SkeletonTiles = () => {
         .fill(null)
         .map((_, i) => (
           <Box key={i}>
-            <Placeholder height="full" width="full" aspectRatio="1/1" />
+            <Skeleton height="full" width="full" aspectRatio="1/1" />
           </Box>
         ))}
     </Box>

diff --git a/packages/wallet/src/views/Search/SearchWallet.tsx b/packages/wallet/src/views/Search/SearchWallet.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { ethers } from 'ethers'
-import { Box, Placeholder, SearchIcon, Text, TextInput } from '@0xsequence/design-system'
+import { Box, SearchIcon, Skeleton, Text, TextInput } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit'
 import Fuse from 'fuse.js'
 import { useAccount, useConfig } from 'wagmi'
@@ -147,7 +147,7 @@ export const SearchWallet = () => {
         {isPending ? (
           Array(5)
             .fill(null)
-            .map((_, i) => <Placeholder key={i} width="full" height="8" />)
+            .map((_, i) => <Skeleton key={i} width="full" height="8" />)
         ) : foundCollectionBalances.length === 0 ? (
           <Text color="text100">No collections found</Text>
         ) : (
@@ -170,7 +170,7 @@ export const SearchWallet = () => {
         {isPending ? (
           Array(5)
             .fill(null)
-            .map((_, i) => <Placeholder key={i} width="full" height="8" />)
+            .map((_, i) => <Skeleton key={i} width="full" height="8" />)
         ) : foundCoinBalances.length === 0 ? (
           <Text color="text100">No coins found</Text>
         ) : (

diff --git a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { ethers } from 'ethers'
-import { Box, Placeholder, SearchIcon, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system'
+import { Box, SearchIcon, Skeleton, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit'
 import { BalanceItem } from './components/BalanceItem'
 import Fuse from 'fuse.js'
@@ -119,7 +119,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
     search === '' ? indexedCollectionBalances : fuzzySearchCollections.search(search).map(result => result.item)
 
   const TabsHeaderSkeleton = () => {
-    return <Placeholder style={{ width: '360px', height: '48px' }} />
+    return <Skeleton style={{ width: '360px', height: '48px' }} />
   }
 
   const ItemsSkeletons = () => {
@@ -128,7 +128,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
         {Array(8)
           .fill(null)
           .map((_, i) => (
-            <Placeholder key={i} width="full" height="8" />
+            <Skeleton key={i} width="full" height="8" />
           ))}
       </>
     )

diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx
@@ -2,17 +2,7 @@ import React from 'react'
 import { ethers } from 'ethers'
 import { Token } from '@0xsequence/api'
 import { Transaction, TxnTransfer } from '@0xsequence/indexer'
-import {
-  ArrowRightIcon,
-  Box,
-  Button,
-  Divider,
-  GradientAvatar,
-  Image,
-  LinkIcon,
-  Placeholder,
-  Text
-} from '@0xsequence/design-system'
+import { ArrowRightIcon, Box, Button, Divider, GradientAvatar, Image, LinkIcon, Skeleton, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useCollectiblePrices } from '@0xsequence/kit'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
@@ -140,7 +130,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
                     {`${balanceDisplayed} ${symbol}`}
                   </Text>
                   {arePricesLoading ? (
-                    <Placeholder style={{ width: '44px', height: '12px' }} />
+                    <Skeleton style={{ width: '44px', height: '12px' }} />
                   ) : (
                     <Text fontWeight="bold" fontSize="xsmall" color="text50">
                       {fiatPrice ? `${fiatCurrency.sign}${fiatValue}` : ''}