status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add Loading component

This commit is contained in:
Pavel Prichodko 2022-06-10 16:06:34 +02:00 committed by Felicio Mununga
parent a1798ccefd
commit bdd51485cb
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/status-react/src/components/loading/index.tsx
View File

@ -1,7 +1,8 @@
import React from 'react' import React from 'react'
import { styled } from '~/src/styles/config'
import ContentLoader from 'react-content-loader' import ContentLoader from 'react-content-loader'
import { styled } from '~/src/styles/config'
import { Box } from '~/src/system' import { Box } from '~/src/system'
const CommunityInfoLoader = () => ( const CommunityInfoLoader = () => (
@ -10,8 +11,8 @@ const CommunityInfoLoader = () => (
width={185} width={185}
height={50} height={50}
viewBox="0 0 185 50" viewBox="0 0 185 50"
backgroundColor="rgba(233, 237, 241, 1)" backgroundColor="var(--colors-accent-8)"
foregroundColor="rgba(246, 248, 250, 1)" foregroundColor="var(--colors-accent-5)"
> >
<rect x="50" y="10" rx="3" ry="3" width="120" height="12" /> <rect x="50" y="10" rx="3" ry="3" width="120" height="12" />
<rect x="50" y="30" rx="3" ry="3" width="120" height="8" /> <rect x="50" y="30" rx="3" ry="3" width="120" height="8" />
@ -19,15 +20,15 @@ const CommunityInfoLoader = () => (
</ContentLoader> </ContentLoader>
) )
const ChannelLoader = () => { const ChatItemLoader = () => {
return ( return (
<ContentLoader <ContentLoader
speed={2} speed={2}
width={272} width={272}
height={40} height={40}
viewBox="0 0 272 40" viewBox="0 0 272 40"
backgroundColor="rgba(233, 237, 241, 1)" backgroundColor="var(--colors-accent-8)"
foregroundColor="rgba(246, 248, 250, 1)" foregroundColor="var(--colors-accent-5)"
> >
<rect x="41" y="13" rx="3" ry="3" width="140" height="14" /> <rect x="41" y="13" rx="3" ry="3" width="140" height="14" />
<circle cx="20" cy="20" r="12" /> <circle cx="20" cy="20" r="12" />
@ -41,16 +42,15 @@ export const Loading = () => {
<Sidebar> <Sidebar>
<CommunityInfoLoader /> <CommunityInfoLoader />
<Box css={{ padding: '8px 0' }}> <Box css={{ padding: '8px 0' }}>
<ChannelLoader /> <ChatItemLoader />
<ChannelLoader /> <ChatItemLoader />
<ChannelLoader /> <ChatItemLoader />
<ChannelLoader /> <ChatItemLoader />
<ChannelLoader /> <ChatItemLoader />
</Box> </Box>
</Sidebar> </Sidebar>
<Box css={{ padding: '6px 10px' }}> <Box css={{ padding: '6px 10px' }}>
<CommunityInfoLoader /> <CommunityInfoLoader />
</Box> </Box>
</Wrapper> </Wrapper>
) )