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

* added widget skeleton to loading state

* removed memo

* made theme inline

src/components/Tokens/TokenDetails/LoadingTokenDetails.tsx

+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>
   )

src/components/Widget/index.tsx

-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} />
+}