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