From 332f8295d7116dd156cdb0131afb9dc273b492d8 Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 30 Jul 2025 10:19:33 -0500
Subject: [PATCH] Update loading state for YourCoins and CoinCard to use
 skeleton

---
 .../pay-and-earn-page/components/CoinCard.tsx | 50 +++++++++++--------
 .../components/YourCoins.tsx                  | 33 ++++++++++--
 2 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/pages/pay-and-earn-page/components/CoinCard.tsx b/packages/web/src/pages/pay-and-earn-page/components/CoinCard.tsx
index bb383cbd050..9df8b1020a4 100644
--- a/packages/web/src/pages/pay-and-earn-page/components/CoinCard.tsx
+++ b/packages/web/src/pages/pay-and-earn-page/components/CoinCard.tsx
@@ -2,6 +2,17 @@ import { ReactNode } from 'react'
 
 import { Flex, Text, useTheme, IconCaretRight, Artwork } from '@audius/harmony'
 
+import Skeleton from 'components/skeleton/Skeleton'
+
+const CoinCardSkeleton = () => {
+  return (
+    <Flex direction='column' gap='xs'>
+      <Skeleton width='120px' height='24px' />
+      <Skeleton width='80px' height='16px' />
+    </Flex>
+  )
+}
+
 export type CoinCardProps = {
   icon: string | ReactNode
   symbol: string
@@ -19,7 +30,7 @@ export const CoinCard = ({
   loading = false,
   onClick
 }: CoinCardProps) => {
-  const { color, motion, spacing } = useTheme()
+  const { color, spacing } = useTheme()
 
   const renderIcon = () => {
     if (typeof icon === 'string') {
@@ -51,25 +62,24 @@ export const CoinCard = ({
     >
       <Flex alignItems='center' gap='m'>
         {renderIcon()}
-        <Flex
-          direction='column'
-          gap='xs'
-          css={{
-            opacity: loading ? 0 : 1,
-            transition: `opacity ${motion.expressive}`
-          }}
-        >
-          <Flex gap='xs'>
-            <Text variant='heading' size='l' color='default'>
-              {balance}
-            </Text>
-            <Text variant='heading' size='l' color='subdued'>
-              {symbol}
-            </Text>
-          </Flex>
-          <Text variant='heading' size='s' color='subdued'>
-            {dollarValue}
-          </Text>
+        <Flex direction='column' gap='xs'>
+          {loading ? (
+            <CoinCardSkeleton />
+          ) : (
+            <>
+              <Flex gap='xs'>
+                <Text variant='heading' size='l' color='default'>
+                  {balance}
+                </Text>
+                <Text variant='heading' size='l' color='subdued'>
+                  {symbol}
+                </Text>
+              </Flex>
+              <Text variant='heading' size='s' color='subdued'>
+                {dollarValue}
+              </Text>
+            </>
+          )}
         </Flex>
       </Flex>
       {onClick ? <IconCaretRight size='l' color='subdued' /> : null}
diff --git a/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx b/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx
index eaf13a3b42f..d6ad5330a2a 100644
--- a/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx
+++ b/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx
@@ -1,7 +1,5 @@
 import { Fragment, useCallback, useContext } from 'react'
 
-import { env } from 'process'
-
 import {
   useUserCoins,
   useCurrentUserId,
@@ -29,11 +27,37 @@ import { encodeHashId } from '@audius/sdk'
 import { useDispatch } from 'react-redux'
 import { push } from 'redux-first-history'
 
+import Skeleton from 'components/skeleton/Skeleton'
 import { ToastContext } from 'components/toast/ToastContext'
+import { env } from 'services/env'
 
 import { AudioCoinCard } from './AudioCoinCard'
 import { CoinCard } from './CoinCard'
 
+const YourCoinsSkeleton = () => {
+  const { spacing } = useTheme()
+  const { isMobile } = useMedia()
+
+  return (
+    <Paper column shadow='far' borderRadius='l' css={{ overflow: 'hidden' }}>
+      <Flex
+        alignItems='center'
+        justifyContent='space-between'
+        p={isMobile ? spacing.l : undefined}
+        alignSelf='stretch'
+      >
+        <Flex alignItems='center' gap='m' p='xl' flex={1}>
+          <Skeleton width='64px' height='64px' />
+          <Flex direction='column' gap='xs'>
+            <Skeleton width='120px' height='24px' />
+            <Skeleton width='80px' height='16px' />
+          </Flex>
+        </Flex>
+      </Flex>
+    </Paper>
+  )
+}
+
 const messages = {
   ...buySellMessages,
   managedAccount: "You can't do that as a managed user",
@@ -95,7 +119,8 @@ const CoinCardWithBalance = ({ coin }: { coin: UserCoin }) => {
 
   const isLoading = isTokenBalanceLoading || isTokenPriceLoading
 
-  if (coin.mint === env.WAUDIO_MINT_ADDRESS) return <AudioCoinCard />
+  if (coin.mint === env.WAUDIO_MINT_ADDRESS)
+    return <AudioCoinCard onClick={() => handleCoinClick(coin.mint)} />
 
   return (
     <CoinCard
@@ -124,7 +149,7 @@ export const YourCoins = () => {
   })
 
   if (isLoadingCoins || !userIdString) {
-    return null
+    return <YourCoinsSkeleton />
   }
 
   return (