Replace Skeleton components with design-system Placeholders

0xsequence · May 4, 2024 · 7c77bd3 · 7c77bd3
1 parent a94019e
commit 7c77bd3
Show file tree

Hide file tree

Showing 20 changed files with 83 additions and 133 deletions.
diff --git a/packages/checkout/src/shared/components/Skeleton/Skeleton.tsx b/packages/checkout/src/shared/components/Skeleton/Skeleton.tsx
diff --git a/packages/checkout/src/shared/components/Skeleton/index.ts b/packages/checkout/src/shared/components/Skeleton/index.ts
diff --git a/packages/checkout/src/shared/components/Skeleton/styles.css.ts b/packages/checkout/src/shared/components/Skeleton/styles.css.ts
diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Card, Image, Text } from '@0xsequence/design-system'
+import { Box, Card, Image, Text, Placeholder } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
 import { CoinIcon } from '../../../shared/components/CoinIcon'
-import { Skeleton } from '../../../shared/components/Skeleton'
 
 import { formatDisplay } from '../../../utils'
 
@@ -72,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">
-        <Skeleton height="80px" width="80px" />
+        <Placeholder style={{ width: '80px', height: '80px' }} />
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
-          <Skeleton width="100px" height="14px" />
-          <Skeleton width="180px" height="34px" />
+          <Placeholder style={{ width: '100px', height: '14px' }} />
+          <Placeholder style={{ width: '180px', height: '34px' }} />
         </Box>
       </Box>
-      <Skeleton height="14px" width="14px" />
+      <Placeholder style={{ width: '14px', height: '14px' }} />
     </Card>
   )
 }
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -10,7 +10,8 @@ import {
   TooltipPrimitive,
   Tooltip,
   PaymentsIcon,
-  vars
+  vars,
+  Placeholder
 } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
 
@@ -20,7 +21,6 @@ import { OrderSummaryItem } from './component/OrderSummaryItem'
 
 import { fetchSardineClientToken, fetchSardineOrderStatus } from '../../api'
 import { CoinIcon } from '../../shared/components/CoinIcon'
-import { Skeleton } from '../../shared/components/Skeleton'
 import { HEADER_HEIGHT } from '../../constants'
 import { useNavigation, useCheckoutModal } from '../../hooks'
 import { compareAddress, formatDisplay } from '../../utils'
@@ -159,7 +159,7 @@ export const CheckoutSelection = () => {
             Total
           </Text>
           {isPending ? (
-            <Skeleton width="100px" height="17px" />
+            <Placeholder style={{ width: '100px', height: '17px' }} />
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
               <CoinIcon imageUrl={coinImageUrl} size={12} />
@@ -220,7 +220,7 @@ export const CheckoutSelection = () => {
       {displayCryptoCheckout && (
         <Box width="full" justifyContent="flex-end">
           {isPending ? (
-            <Skeleton width="102px" height="14px" />
+            <Placeholder 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,12 +1,12 @@
-import { Box, Card, GradientAvatar, Text } from '@0xsequence/design-system'
+import { Box, Card, GradientAvatar, Placeholder, Text } from '@0xsequence/design-system'
 
 import React, { useEffect, useState } from 'react'
 
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
 
 import { useTokenMetadata, useBalances } from '@0xsequence/kit'
-import { Skeleton, CollectibleTileImage, CoinIcon, formatDisplay } from '@0xsequence/kit-wallet'
+import { CollectibleTileImage, CoinIcon, formatDisplay } from '@0xsequence/kit-wallet'
 import { compareAddress, getNativeTokenInfoByChainId } from '../../utils'
 import { commons } from '@0xsequence/core'
 import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../utils/txnDecoding'
@@ -24,15 +24,15 @@ export const TxnDetailsSkeleton = () => {
   return (
     <Box alignItems="center" justifyContent="space-between">
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Skeleton width={30} height={30} borderRadius="circle" />
+        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Skeleton width={100} height={14} />
-          <Skeleton width={75} height={14} />
+          <Placeholder style={{ width: 100, height: 14 }} />
+          <Placeholder style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Skeleton width={100} height={14} />
-        <Skeleton width={50} height={12} />
+        <Placeholder style={{ width: 100, height: 14 }} />
+        <Placeholder 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, Text, vars } from '@0xsequence/design-system'
+import { Box, Image, Placeholder, Text, vars } from '@0xsequence/design-system'
 
 import React from 'react'
-import { Skeleton } from '../shared/Skeleton'
 import { ethers } from 'ethers'
 
 import { CoinIcon } from './CoinIcon'
@@ -29,15 +28,15 @@ export const CoinRowSkeleton = () => {
       paddingX="3"
     >
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Skeleton width={30} height={30} borderRadius="circle" />
+        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Skeleton width={100} height={14} />
-          <Skeleton width={75} height={14} />
+          <Placeholder style={{ width: 100, height: 14 }} />
+          <Placeholder style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Skeleton width={100} height={14} />
-        <Skeleton width={50} height={12} />
+        <Placeholder style={{ width: 100, height: 14 }} />
+        <Placeholder style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )

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

diff --git a/packages/wallet/src/shared/Skeleton/Skeleton.tsx b/packages/wallet/src/shared/Skeleton/Skeleton.tsx
diff --git a/packages/wallet/src/shared/Skeleton/index.ts b/packages/wallet/src/shared/Skeleton/index.ts
diff --git a/packages/wallet/src/shared/Skeleton/styles.css.ts b/packages/wallet/src/shared/Skeleton/styles.css.ts
diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -3,11 +3,20 @@ 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 } from '@0xsequence/design-system'
+import {
+  ArrowRightIcon,
+  Box,
+  Text,
+  Image,
+  SendIcon,
+  ReceiveIcon,
+  TransactionIcon,
+  vars,
+  Placeholder
+} from '@0xsequence/design-system'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
 
-import { Skeleton } from '../../shared/Skeleton'
 import { useSettings, useNavigation } from '../../hooks'
 import { formatDisplay, compareAddress } from '../../utils'
 
@@ -160,7 +169,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
                 {tokenLogoUri && <Image src={tokenLogoUri} width="5" alt="token logo" />}
                 {getTransferAmountLabel(formatDisplay(amountValue), symbol, transfer.transferType)}
               </Box>
-              {isPending && <Skeleton width="35px" height="20px" />}
+              {isPending && <Placeholder 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,27 +1,25 @@
 import React from 'react'
-import { Text, Box } from '@0xsequence/design-system'
-
-import { Skeleton } from '../../shared/Skeleton'
+import { Text, Box, Placeholder } 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">
-          <Skeleton width="65px" height="20px" />
-          <Skeleton width="75px" height="17px" />
+          <Placeholder style={{ width: '65px', height: '20px' }} />
+          <Placeholder style={{ width: '75px', height: '17px' }} />
         </Box>
         <Box flexDirection="row" justifyContent="space-between">
-          <Skeleton width="120px" height="20px" />
-          <Skeleton width="35px" height="17px" />
+          <Placeholder style={{ width: '120px', height: '20px' }} />
+          <Placeholder style={{ width: '35px', height: '17px' }} />
         </Box>
       </Box>
     )
   }
 
   return (
     <Box flexDirection="column" gap="3">
-      <Skeleton width="70px" height="17px" />
+      <Placeholder 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,9 +1,8 @@
 import React from 'react'
-import { Box, Button, SendIcon, Text, vars } from '@0xsequence/design-system'
+import { Box, Button, Placeholder, SendIcon, Text } from '@0xsequence/design-system'
 
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 import { NetworkBadge } from '../../shared/NetworkBadge'
-import { Skeleton } from '../../shared/Skeleton'
 
 import { HEADER_HEIGHT } from '../../constants'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
@@ -19,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">
-          <Skeleton width="32px" height="32px" />
-          <Skeleton height="24px" width="70px" />
+          <Placeholder style={{ width: '32px', height: '32px' }} />
+          <Placeholder 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">
-            <Skeleton width="150px" height="36px" />
-            <Skeleton width="33px" height="17px" />
+            <Placeholder style={{ width: '150px', height: '36px' }} />
+            <Placeholder 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,7 +1,6 @@
 import React from 'react'
-import { Box, Button, SendIcon, Text, vars } from '@0xsequence/design-system'
+import { Box, Button, Placeholder, SendIcon, Text } from '@0xsequence/design-system'
 
-import { Skeleton } from '../../shared/Skeleton'
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 
 import { HEADER_HEIGHT } from '../../constants'
@@ -23,11 +22,11 @@ export const CollectibleDetailsSkeleton = () => {
         }}
       >
         <Box gap="3" alignItems="center" justifyContent="center" flexDirection="column">
-          <Skeleton width="120px" height="30px" />
-          <Skeleton width="140px" height="40px" />
+          <Placeholder style={{ width: '120px', height: '30px' }} />
+          <Placeholder style={{ width: '140px', height: '40px' }} />
         </Box>
         <Box>
-          <Skeleton width="347px" height="347px" />
+          <Placeholder style={{ width: '347px', height: '347px' }} />
         </Box>
         <Box>
           {/* balance */}
@@ -36,8 +35,8 @@ export const CollectibleDetailsSkeleton = () => {
               Balance
             </Text>
             <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-              <Skeleton width="44px" height="36px" />
-              <Skeleton width="34px" height="17px" />
+              <Placeholder style={{ width: '44px', height: '36px' }} />
+              <Placeholder 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,8 +1,7 @@
 import React from 'react'
-import { Box, vars } from '@0xsequence/design-system'
+import { Box, Placeholder, vars } from '@0xsequence/design-system'
 
 import { NetworkBadge } from '../../shared/NetworkBadge'
-import { Skeleton } from '../../shared/Skeleton'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 interface CollectionDetailsSkeletonProps {
@@ -24,13 +23,13 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
       gap="10"
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
-        <Skeleton width="32px" height="32px" />
-        <Skeleton width="100px" height="24px" />
+        <Placeholder style={{ width: '32px', height: '32px' }} />
+        <Placeholder style={{ width: '100px', height: '24px' }} />
         <NetworkBadge chainId={chainId} />
-        <Skeleton width="142px" height="17px" />
+        <Placeholder style={{ width: '142px', height: '17px' }} />
       </Box>
       <Box width="full">
-        <Skeleton width="168px" height="20px" />
+        <Placeholder style={{ width: '168px', height: '20px' }} />
         <Box
           style={{
             display: 'grid',
@@ -43,7 +42,7 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
           {Array(8)
             .fill(null)
             .map((_, i) => (
-              <Skeleton key={i} width="full" aspectRatio="1/1" />
+              <Placeholder key={i} width="full" aspectRatio="1/1" />
             ))}
         </Box>
       </Box>