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

fix loaders

This commit is contained in:
saml33 2022-09-09 11:00:47 +10:00
parent a1f01b7866
commit 6cfc397dd2
5 changed files with 24 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/TradeHistoryTable.tsx
View File

@ -340,16 +340,16 @@ const TradeHistoryTable = ({
)
) : (
<div className="mt-8 space-y-2">
<SheenLoader>
<SheenLoader className="flex flex-1">
<div className="h-8 w-full rounded bg-th-bkg-2" />
</SheenLoader>
<SheenLoader>
<SheenLoader className="flex flex-1">
<div className="h-16 w-full rounded bg-th-bkg-2" />
</SheenLoader>
<SheenLoader>
<SheenLoader className="flex flex-1">
<div className="h-16 w-full rounded bg-th-bkg-2" />
</SheenLoader>
<SheenLoader>
<SheenLoader className="flex flex-1">
<div className="h-16 w-full rounded bg-th-bkg-2" />
</SheenLoader>
</div>

8
components/account/AccountPage.tsx
View File

@ -219,12 +219,12 @@ const AccountPage = () => {
</div>
<AccountActions />
</div>
<div className="grid grid-cols-4 gap-x-6 border-b border-th-bkg-3 md:border-b-0">
<div className="col-span-4 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
<div className="grid grid-cols-3 gap-x-6 border-b border-th-bkg-3 md:border-b-0">
<div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
<p className="text-th-fgd-3">{t('health')}</p>
<p className="text-2xl font-bold text-th-fgd-1">{maintHealth}%</p>
</div>
<div className="col-span-4 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
<div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
<p className="text-th-fgd-3">{t('free-collateral')}</p>
<p className="text-2xl font-bold text-th-fgd-1">
{mangoAccount
@ -253,7 +253,7 @@ const AccountPage = () => {
</IconButton>
) : null}
</div> */}
<div className="col-span-4 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
<div className="col-span-3 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
<div>
<p className="text-th-fgd-3">{t('total-interest-value')}</p>
<p className="text-2xl font-bold text-th-fgd-1">

39
components/shared/DetailedAreaChart.tsx
View File

@ -21,6 +21,7 @@ import { IconButton } from './Button'
import { ArrowLeftIcon } from '@heroicons/react/20/solid'
import { FadeInFadeOut } from './Transitions'
import ChartRangeButtons from './ChartRangeButtons'
import PercentageChange from './PercentageChange'
dayjs.extend(relativeTime)
@ -91,8 +92,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
<FadeInFadeOut show={true}>
<ContentBox hideBorder hidePadding>
{loading ? (
<SheenLoader>
<div className="h-[448px] rounded-lg bg-th-bkg-2" />
<SheenLoader className="flex flex-1">
<div className="h-[448px] w-full rounded-lg bg-th-bkg-2" />
</SheenLoader>
) : data.length ? (
<div className="relative">
@ -114,21 +115,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
numbers={mouseData[yKey].toFixed(2)}
/>
{!hideChange ? (
<span
className={`ml-3 flex items-center text-sm ${
calculateChartChange() >= 0
? 'text-th-green'
: 'text-th-red'
}`}
>
{calculateChartChange() >= 0 ? (
<UpTriangle />
) : (
<DownTriangle />
)}
<span className="ml-1">
{calculateChartChange().toFixed(2)}%
</span>
<span className="ml-3">
<PercentageChange change={calculateChartChange()} />
</span>
) : null}
</div>
@ -147,21 +135,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
numbers={data[data.length - 1][yKey].toFixed(2)}
/>
{!hideChange ? (
<span
className={`ml-3 mt-0 flex items-center text-sm ${
calculateChartChange() >= 0
? 'text-th-green'
: 'text-th-red'
}`}
>
{calculateChartChange() >= 0 ? (
<UpTriangle />
) : (
<DownTriangle />
)}
<span className="ml-1">
{calculateChartChange().toFixed(2)}%
</span>
<span className="ml-3">
<PercentageChange change={calculateChartChange()} />
</span>
) : null}
</div>

8
components/shared/SheenLoader.tsx
View File

@ -1,3 +1,4 @@
import { useTheme } from 'next-themes'
import { ReactNode } from 'react'
// Children should be a shape or set of shapes with a bg color to animate over
@ -9,10 +10,15 @@ const SheenLoader = ({
children: ReactNode
className?: string
}) => {
const { theme } = useTheme()
return (
<div className="flex items-center">
<div
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`}
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 ${
theme === 'Light'
? 'before:via-[rgba(0,0,0,0.1)]'
: 'before:via-[rgba(255,255,255,0.1)]'
} before:to-transparent`}
>
{children}
</div>

4
components/swap/SwapForm.tsx
View File

@ -317,8 +317,8 @@ const SwapForm = () => {
<div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 bg-th-bkg-3 text-right text-xl font-bold tracking-wider text-th-fgd-3">
{isLoadingTradeDetails ? (
<div className="w-full">
<SheenLoader className="rounded-l-none">
<div className="h-[52px] w-full rounded-r-lg bg-th-bkg-3" />
<SheenLoader className="flex flex-1 rounded-l-none">
<div className="h-[52px] w-full rounded-r-lg bg-th-bkg-4" />
</SheenLoader>
</div>
) : (