add sheen loader/chart load state

components/account/AccountActions.tsx

@@ -75,7 +75,7 @@ const AccountActions = () => {
                     onClick={handleCloseMangoAccount}
                   >
                     <TrashIcon className="mr-2 h-5 w-5" />
-                    {t('close-account:close-account')}
+                    {t('close-account')}
                   </LinkButton>
                 </Popover.Panel>
               </Transition>

components/shared/SheenLoader.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+
+// Children should be a shape or set of shapes with a bg color to animate over
+
+const SheenLoader = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="w-full">
+        <div className="relative overflow-hidden rounded-lg before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SheenLoader

components/swap/JupiterRoutes.tsx

@@ -77,8 +77,8 @@ const JupiterRoutes = ({
   }
 
   return routes?.length && selectedRoute && outputTokenInfo ? (
-    <div>
-      <>
+    <div className="flex h-full flex-col justify-between">
+      <div>
         <IconButton
           className="absolute top-2 right-2 text-th-fgd-3"
           onClick={onClose}
@@ -108,11 +108,14 @@ const JupiterRoutes = ({
             outputTokenInfo={outputTokenInfo}
           />
         ) : null}
-      </>
-      <div className="mt-6 flex justify-center">
+      </div>
+      <div className="flex items-center justify-center pb-6">
         <Button onClick={onSwap} className="w-full text-base" size="large">
-          {submitting ? <Loading className="mr-2 h-5 w-5" /> : null}
-          {t('trade:confirm-trade')}
+          {submitting ? (
+            <Loading className="mr-2 h-5 w-5" />
+          ) : (
+            t('trade:confirm-trade')
+          )}
         </Button>
       </div>
     </div>

components/swap/RouteFeeInfo.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from 'react'
 import mangoStore from '../../store/state'
 import { TokenInfo } from '../../types/jupiter'
 import { formatDecimal } from '../../utils/numbers'
-import Button from '../shared/Button'
 
 type RouteFeeInfoProps = {
   selectedRoute: RouteInfo

components/swap/SwapTokenChart.tsx

@@ -16,6 +16,7 @@ import ContentBox from '../shared/ContentBox'
 import { GREEN, RED } from '../../styles/colors'
 import { DownTriangle, UpTriangle } from '../shared/DirectionTriangles'
 import { formatFixedDecimals } from '../../utils/numbers'
+import SheenLoader from '../shared/SheenLoader'
 
 dayjs.extend(relativeTime)
 
@@ -77,6 +78,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
   outputTokenId,
 }) => {
   const [chartData, setChartData] = useState([])
+  const [loadChartData, setLoadChartData] = useState(true)
   const [baseTokenId, setBaseTokenId] = useState('')
   const [quoteTokenId, setQuoteTokenId] = useState('')
   const [inputTokenInfo, setInputTokenInfo] = useState<any>(null)
@@ -115,6 +117,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
       daysToShow
     )
     setChartData(chartData)
+    setTimeout(() => setLoadChartData(false), 1500)
   }, [baseTokenId, quoteTokenId, daysToShow])
 
   const getInputTokenInfo = useCallback(async () => {
@@ -160,7 +163,11 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
 
   return (
     <ContentBox hideBorder hidePadding>
-      {chartData.length && baseTokenId && quoteTokenId ? (
+      {loadChartData ? (
+        <SheenLoader>
+          <div className="h-96 rounded-lg bg-th-bkg-2" />
+        </SheenLoader>
+      ) : chartData.length && baseTokenId && quoteTokenId ? (
         <div className="relative flex justify-between md:block">
           <div className="flex items-start justify-between">
             <div>
@@ -328,8 +335,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
       ) : (
         <div className="mt-4 flex h-96 items-center justify-center rounded-lg bg-th-bkg-2 p-4 text-th-fgd-3 md:mt-0">
           <div className="">
-            <LineChartIcon className="mx-auto h-12 w-12 text-th-primary" />
-            <span className="text-lg">Chart not available</span>
+            <LineChartIcon className="mx-auto h-10 w-10 text-th-fgd-4" />
+            <p className="text-th-fgd-4">Chart not available</p>
           </div>
         </div>
       )}

public/locales/en/common.json

@@ -1,5 +1,6 @@
 {
    "account-value": "Account Value",
+   "balance": "Balance",
    "borrow": "Borrow",
    "buy": "Buy",
    "close-account": "Close Account",

public/locales/es/common.json

@@ -1,5 +1,6 @@
 {
    "account-value": "Account Value",
+   "balance": "Balance",
    "borrow": "Borrow",
    "buy": "Buy",
    "close-account": "Close Account",

public/locales/zh/common.json

@@ -1,5 +1,6 @@
 {
     "account-value": "Account Value",
+    "balance": "Balance",
     "borrow": "Borrow",
     "buy": "Buy",
     "close-account": "Close Account",

public/locales/zh_tw/common.json

@@ -1,5 +1,6 @@
 {
   "account-value": "Account Value",
+  "balance": "Balance",
   "borrow": "Borrow",
   "buy": "Buy",
   "close-account": "Close Account",

tailwind.config.js

@@ -107,6 +107,11 @@ module.exports = {
             transform: 'rotate(-6deg)',
           },
         },
+        shimmer: {
+          '100%': {
+            transform: 'translateX(100%)',
+          },
+        },
       },
       backgroundImage: {
         'long-loss': "url('/share_images/bg-long-loss.png')",