blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add sheen loader for price on swap chart

This commit is contained in:
tjs 2022-08-17 16:05:38 -04:00
parent 906640c732
commit a7b915d071
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/account/AccountTabs.tsx
View File

@ -19,7 +19,7 @@ const AccountTabs = () => {
return ( return (
<> <>
<div className="mb-4 mt-8 md:mt-12"> <div className="mb-4 mt-8 md:mt-10">
<TabButtons <TabButtons
activeValue={activeTab} activeValue={activeTab}
onChange={(v) => setActiveTab(v)} onChange={(v) => setActiveTab(v)}

6
components/shared/SheenLoader.tsx
View File

@ -10,15 +10,13 @@ const SheenLoader = ({
className?: string className?: string
}) => { }) => {
return ( return (
<div className="flex items-center justify-center"> <div className="flex items-center">
<div className="w-full">
<div <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 ${className}`} className={`relative ${className} overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_4s_infinite] before:bg-gradient-to-r before:from-transparent before:via-th-bkg-3 before:to-transparent`}
> >
{children} {children}
</div> </div>
</div> </div>
</div>
) )
} }

15
components/swap/SwapTokenChart.tsx
View File

@ -177,9 +177,20 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
return ( return (
<ContentBox hideBorder hidePadding> <ContentBox hideBorder hidePadding>
{loadChartData ? ( {loadChartData ? (
<SheenLoader> <>
<div className="h-[448px] rounded-lg bg-th-bkg-2" /> <SheenLoader className="w-[148px] rounded-md">
<div className="h-[18px] bg-th-bkg-2" />
</SheenLoader> </SheenLoader>
<SheenLoader className="mt-2 w-[148px] rounded-md">
<div className="h-[48px] bg-th-bkg-2" />
</SheenLoader>
<SheenLoader className="mt-2 w-[148px] rounded-md">
<div className="h-[18px] bg-th-bkg-2" />
</SheenLoader>
<SheenLoader className="mt-4 w-full rounded-md">
<div className="h-[300px] bg-th-bkg-2" />
</SheenLoader>
</>
) : chartData.length && baseTokenId && quoteTokenId ? ( ) : chartData.length && baseTokenId && quoteTokenId ? (
<div className="relative flex justify-between md:block"> <div className="relative flex justify-between md:block">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">