feat: add swap widget skeleton for loading states (#200)

* Created swap widget skelton component, exported by package
* design changes and pr comments
* address comments, removed px for em

src/components/Swap/Skeleton.tsx

@@ -0,0 +1,90 @@
+import { StrictMode } from 'react'
+import styled from 'styled-components/macro'
+import { Theme, ThemeProvider } from 'theme'
+
+import Column from '../Column'
+import Row from '../Row'
+import Rule from '../Rule'
+import { WidgetWrapper } from '../Widget'
+import ReverseButton from './ReverseButton'
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+`
+const Blob = styled.div<{ height: string; width: string; radius?: number; isModule?: boolean }>`
+  background-color: ${({ isModule, theme }) => (isModule ? theme.outline : theme.module)};
+  border-radius: ${({ theme, radius }) => (radius ?? 0.25 * theme.borderRadius) + 'em'};
+  height: ${({ height }) => height};
+  width: ${({ width }) => width};
+`
+const WideColumn = styled(Column)`
+  width: 100%;
+`
+
+function FloatingDetails({ isModule }: { isModule?: boolean }) {
+  return (
+    <WideColumn gap={0.75}>
+      <Row>
+        <Blob height="1em" width="2.5em" isModule={isModule} />
+      </Row>
+      <Row>
+        <Blob height="2em" width="3.75em" isModule={isModule} />
+        <Blob height="2em" width="7.25em" isModule={isModule} />
+      </Row>
+    </WideColumn>
+  )
+}
+
+function FloatingButton() {
+  return (
+    <WideColumn gap={0.875}>
+      <Rule />
+      <Blob height="1em" width="7.5em" isModule />
+      <Blob height="3.5em" width="100%" radius={0.75} isModule />
+    </WideColumn>
+  )
+}
+
+export const OutputColumn = styled(Column)`
+  background-color: ${({ theme }) => theme.module};
+  border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
+  display: flex;
+  gap: 1.875em;
+  padding: 0.75em;
+  padding-bottom: 2em;
+`
+
+export const InputColumn = styled(Column)`
+  margin: 0.75em;
+`
+
+export interface SwapWidgetSkeletonProps {
+  theme?: Theme
+  width?: string | number
+}
+
+export function SwapWidgetSkeleton({ theme, width }: SwapWidgetSkeletonProps) {
+  return (
+    <StrictMode>
+      <ThemeProvider theme={theme}>
+        <WidgetWrapper width={width}>
+          <LoadingWrapper>
+            <InputColumn>
+              <FloatingDetails />
+            </InputColumn>
+            <div>
+              <ReverseButton disabled={true} />
+              <OutputColumn>
+                <FloatingDetails isModule />
+                <FloatingButton />
+              </OutputColumn>
+            </div>
+          </LoadingWrapper>
+        </WidgetWrapper>
+      </ThemeProvider>
+    </StrictMode>
+  )
+}

src/components/Widget.tsx

@@ -23,7 +23,7 @@ import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary'
 
 const DEFAULT_CHAIN_ID = SupportedChainId.MAINNET
 
-const WidgetWrapper = styled.div<{ width?: number | string }>`
+export const WidgetWrapper = styled.div<{ width?: number | string }>`
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

src/cosmos/SwapSkeleton.fixture.tsx

@@ -0,0 +1,14 @@
+import { darkTheme, defaultTheme, lightTheme, SwapWidgetSkeleton } from '@uniswap/widgets'
+import { useEffect } from 'react'
+import { useValue } from 'react-cosmos/fixture'
+
+function Fixture() {
+  const [width] = useValue('width', { defaultValue: 360 })
+  const [theme, setTheme] = useValue('theme', { defaultValue: defaultTheme })
+  const [darkMode] = useValue('darkMode', { defaultValue: false })
+  useEffect(() => setTheme((theme) => ({ ...theme, ...(darkMode ? darkTheme : lightTheme) })), [darkMode, setTheme])
+
+  return <SwapWidgetSkeleton theme={theme} width={width} />
+}
+
+export default <Fixture />

src/index.tsx

@@ -10,6 +10,8 @@ export { TradeType } from '@uniswap/sdk-core'
 export type { TokenInfo } from '@uniswap/token-lists'
 export type { Provider as Eip1193Provider } from '@web3-react/types'
 export type { ErrorHandler } from 'components/Error/ErrorBoundary'
+export type { SwapWidgetSkeletonProps } from 'components/Swap/Skeleton'
+export { SwapWidgetSkeleton } from 'components/Swap/Skeleton'
 export { SupportedChainId } from 'constants/chains'
 export type { SupportedLocale } from 'constants/locales'
 export { DEFAULT_LOCALE, SUPPORTED_LOCALES } from 'constants/locales'