ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update loading icon (#3428)

Browse Source 
* update loading icon

* color update, update file for spinner

* update loader styling size

* update file naming for spinner
This commit is contained in:
Ian Lapham 2022-03-04 11:07:02 -05:00 committed by GitHub
parent 2de29129ed
commit 6d9d38819e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/Swap/Toolbar/Caption.tsx
View File

@ -3,7 +3,8 @@ import { Currency, TradeType } from '@uniswap/sdk-core'
import useUSDCPrice from 'hooks/useUSDCPrice'
import Tooltip from 'lib/components/Tooltip'
import { WrapType } from 'lib/hooks/swap/useWrapCallback'
import { AlertTriangle, Icon, Info, Spinner } from 'lib/icons'
import { AlertTriangle, Icon, Info } from 'lib/icons'
import InlineSpinner from 'lib/icons/InlineSpinner'
import { ThemedText } from 'lib/theme'
import { ReactNode, useCallback, useMemo, useState } from 'react'
import { InterfaceTrade } from 'state/routing/types'
@ -47,7 +48,7 @@ export function Empty() {
}
export function LoadingTrade() {
return <Caption icon={Spinner} caption={<Trans>Fetching best price…</Trans>} />
return <Caption icon={InlineSpinner} caption={<Trans>Fetching best price…</Trans>} />
}
export function WrapCurrency({ loading, wrapType }: { loading: boolean; wrapType: WrapType.UNWRAP | WrapType.WRAP }) {

57
src/lib/icons/InlineSpinner.tsx Normal file
View File

@ -0,0 +1,57 @@
import styled, { keyframes } from 'lib/theme'
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`
const Wrapper = styled.div`
align-items: center;
display: flex;
height: 16px;
transition: 250ms ease color;
width: 16px;
`
const InnerDot = styled.div`
background-color: ${({ theme }) => theme.outline};
border-radius: 50%;
height: 8px;
margin-left: 3px;
min-height: 8px;
min-width: 8px;
position: relative;
transition: 250ms ease background-color;
width: 8px;
`
const OuterRing = styled.div`
animation: ${rotate} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
background: transparent;
border-bottom: 1px solid transparent;
border-left: 2px solid ${({ theme }) => theme.primary};
border-radius: 50%;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
height: 14px;
left: -3px;
position: relative;
top: -3px;
transform: translateZ(0);
transition: 250ms ease border-color;
width: 14px;
`
export default function InlineSpinner() {
return (
<Wrapper>
<InnerDot>
<OuterRing />
</InnerDot>
</Wrapper>
)
}