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 (
<>
<div className="mb-4 mt-8 md:mt-12">
<div className="mb-4 mt-8 md:mt-10">
<TabButtons
activeValue={activeTab}
onChange={(v) => setActiveTab(v)}

6
components/shared/SheenLoader.tsx
View File

@ -10,15 +10,13 @@ const SheenLoader = ({
className?: string
}) => {
return (
<div className="flex items-center justify-center">
<div className="w-full">
<div className="flex items-center">
<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}
</div>
</div>
</div>
)
}

15
components/swap/SwapTokenChart.tsx
View File

@ -177,9 +177,20 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
return (
<ContentBox hideBorder hidePadding>
{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 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 ? (
<div className="relative flex justify-between md:block">
<div className="flex items-start justify-between">