add Loading component
This commit is contained in:
parent
730be38d59
commit
5c55d16100
|
@ -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,17 +42,16 @@ 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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue