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

feat: added widget skeleton to loading state (#4793)

Browse Source 
* added widget skeleton to loading state

* removed memo

* made theme inline
This commit is contained in:
cartcrom 2022-10-05 11:19:46 -04:00 committed by GitHub
parent d62013177d
commit 9037930e56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Tokens/TokenDetails/LoadingTokenDetails.tsx
View File

@ -1,3 +1,4 @@
import { WidgetSkeleton } from 'components/Widget'
import { Footer, LeftPanel, RightPanel, TokenDetailsLayout } from 'pages/TokenDetails'
import styled, { useTheme } from 'styled-components/macro'
@ -154,7 +155,9 @@ export function LoadingTokenDetails() {
return (
<TokenDetailsLayout>
<LoadingTokenDetail />
<RightPanel />
<RightPanel>
<WidgetSkeleton />
</RightPanel>
<Footer />
</TokenDetailsLayout>
)

10
src/components/Widget/index.tsx
View File

@ -1,7 +1,6 @@
import { Currency, OnReviewSwapClick, SwapWidget } from '@uniswap/widgets'
import { Currency, OnReviewSwapClick, SwapWidget, SwapWidgetSkeleton } from '@uniswap/widgets'
import { useWeb3React } from '@web3-react/core'
import { useActiveLocale } from 'hooks/useActiveLocale'
import { useMemo } from 'react'
import { useIsDarkMode } from 'state/user/hooks'
import { DARK_THEME, LIGHT_THEME } from 'theme/widget'
@ -20,8 +19,7 @@ export interface WidgetProps {
export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps) {
const locale = useActiveLocale()
const darkMode = useIsDarkMode()
const theme = useMemo(() => (darkMode ? DARK_THEME : LIGHT_THEME), [darkMode])
const theme = useIsDarkMode() ? DARK_THEME : LIGHT_THEME
const { provider } = useWeb3React()
const { inputs, tokenSelector } = useSyncWidgetInputs(defaultToken)
@ -49,3 +47,7 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
</>
)
}
export function WidgetSkeleton() {
return <SwapWidgetSkeleton theme={useIsDarkMode() ? DARK_THEME : LIGHT_THEME} width={WIDGET_WIDTH} />
}