Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit c0c716e

Browse files
mydearxymmydearxym
committed
Merge branch 'multi-loading' into dev
2 parents bf96c91 + f9b3df2 commit c0c716e

File tree

13 files changed

+189
-26
lines changed

13 files changed

+189
-26
lines changed

‎components/LoadingEffects/PostLoading.js renamed to ‎components/LoadingEffects/ArticleContentLoading.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const LoadingItem = ({ theme }) => (
2929
</ContentLoader>
3030
)
3131

32-
const PostLoading = ({ num, theme }) => {
32+
const ArticleContentLoading = ({ num, theme }) => {
3333
// const ukey = uid.gen()
3434
const range = R.range(0, num)
3535
return range.map(() => (
@@ -39,12 +39,12 @@ const PostLoading = ({ num, theme }) => {
3939
))
4040
}
4141

42-
PostLoading.propTypes = {
42+
ArticleContentLoading.propTypes = {
4343
num: PropTypes.number,
4444
}
4545

46-
PostLoading.defaultProps = {
46+
ArticleContentLoading.defaultProps = {
4747
num: 1,
4848
}
4949

50-
export default withTheme(PostLoading)
50+
export default withTheme(ArticleContentLoading)

‎components/LoadingEffects/JobItemLoading.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react'
2+
import R from 'ramda'
3+
import PropTypes from 'prop-types'
4+
import styled, { withTheme } from 'styled-components'
5+
import ContentLoader from 'react-content-loader'
6+
7+
import { uid } from '../../utils'
8+
9+
// Config-page: http://danilowoz.com/create-react-content-loader/
10+
const LoadingWrapper = styled.div`
11+
width: 100%;
12+
overflow: hidden;
13+
`
14+
15+
const LoadingItem = ({ theme }) => (
16+
<ContentLoader
17+
height={63}
18+
width={500}
19+
speed={2}
20+
primaryColor={theme.loading.basic}
21+
secondaryColor={theme.loading.animate}
22+
>
23+
<rect x="283.02" y="141.21" rx="4" ry="4" width="86.5" height="9" />
24+
<rect x="6" y="7.2" rx="0" ry="0" width="205" height="9" />
25+
<rect x="6" y="26.2" rx="0" ry="0" width="89" height="8" />
26+
<rect x="105" y="28.2" rx="0" ry="0" width="81" height="7" />
27+
<rect x="6" y="43.2" rx="0" ry="0" width="197" height="7" />
28+
<rect x="283" y="7.25" rx="0" ry="0" width="136.8" height="8.52" />
29+
<rect x="283" y="41.2" rx="0" ry="0" width="98.28" height="7.99" />
30+
<rect x="457.36" y="8.2" rx="0" ry="0" width="38.68" height="37.84" />
31+
<rect x="283" y="24.2" rx="0" ry="0" width="34" height="8.58" />
32+
<rect x="327.44" y="24.2" rx="0" ry="0" width="27" height="8.58" />
33+
<rect x="364.44" y="24.2" rx="0" ry="0" width="34" height="8.58" />
34+
</ContentLoader>
35+
)
36+
37+
const JobItemLoading = ({ num, theme }) => {
38+
// const ukey = uid.gen()
39+
const range = R.range(0, num)
40+
return range.map(() => (
41+
<LoadingWrapper key={uid.gen()}>
42+
<LoadingItem uniquekey={uid.gen()} theme={theme} />
43+
</LoadingWrapper>
44+
))
45+
}
46+
47+
JobItemLoading.propTypes = {
48+
num: PropTypes.number,
49+
}
50+
51+
JobItemLoading.defaultProps = {
52+
num: 1,
53+
}
54+
55+
export default withTheme(JobItemLoading)

‎components/LoadingEffects/PostsLoading.js renamed to ‎components/LoadingEffects/PostItemLoading.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const LoadingWrapper = styled.div`
1616

1717
const LoadingItem = ({ theme }) => (
1818
<ContentLoader
19-
height={560}
19+
height={70}
2020
width={500}
2121
speed={2}
2222
primaryColor={theme.loading.basic}
@@ -33,7 +33,7 @@ const LoadingItem = ({ theme }) => (
3333
</ContentLoader>
3434
)
3535

36-
const PostsLoading = ({ num, theme }) => {
36+
const PostItemLoading = ({ num, theme }) => {
3737
// const ukey = uid.gen()
3838
const range = R.range(0, num)
3939
return range.map(() => (
@@ -43,12 +43,12 @@ const PostsLoading = ({ num, theme }) => {
4343
))
4444
}
4545

46-
PostsLoading.propTypes = {
46+
PostItemLoading.propTypes = {
4747
num: PropTypes.number,
4848
}
4949

50-
PostsLoading.defaultProps = {
50+
PostItemLoading.defaultProps = {
5151
num: 1,
5252
}
5353

54-
export default withTheme(PostsLoading)
54+
export default withTheme(PostItemLoading)

‎components/LoadingEffects/RepoItemLoading.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react'
2+
import R from 'ramda'
3+
import PropTypes from 'prop-types'
4+
import styled, { withTheme } from 'styled-components'
5+
import ContentLoader from 'react-content-loader'
6+
7+
import { uid } from '../../utils'
8+
9+
// Config-page: http://danilowoz.com/create-react-content-loader/
10+
const LoadingWrapper = styled.div`
11+
width: 100%;
12+
overflow: hidden;
13+
`
14+
15+
const LoadingItem = ({ theme }) => (
16+
<ContentLoader
17+
height={80}
18+
width={500}
19+
speed={2}
20+
primaryColor={theme.loading.basic}
21+
secondaryColor={theme.loading.animate}
22+
>
23+
<rect x="13" y="10.69" rx="4" ry="4" width="183" height="8.64" />
24+
<rect x="13" y="29.22" rx="4" ry="4" width="401.3464" height="5.2" />
25+
<rect x="13" y="43.2" rx="4" ry="4" width="331.58" height="5.2" />
26+
<rect x="283.02" y="141.21" rx="4" ry="4" width="86.5" height="9.76" />
27+
<rect x="433" y="12.2" rx="0" ry="0" width="60" height="5.6" />
28+
<rect x="13" y="58.2" rx="0" ry="0" width="137" height="6.5" />
29+
</ContentLoader>
30+
)
31+
32+
const RepoItemLoading = ({ num, theme }) => {
33+
// const ukey = uid.gen()
34+
const range = R.range(0, num)
35+
return range.map(() => (
36+
<LoadingWrapper key={uid.gen()}>
37+
<LoadingItem uniquekey={uid.gen()} theme={theme} />
38+
</LoadingWrapper>
39+
))
40+
}
41+
42+
RepoItemLoading.propTypes = {
43+
num: PropTypes.number,
44+
}
45+
46+
RepoItemLoading.defaultProps = {
47+
num: 1,
48+
}
49+
50+
export default withTheme(RepoItemLoading)

‎components/LoadingEffects/VideoItemLoading.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react'
2+
import R from 'ramda'
3+
import PropTypes from 'prop-types'
4+
import styled, { withTheme } from 'styled-components'
5+
import ContentLoader from 'react-content-loader'
6+
7+
import { uid } from '../../utils'
8+
9+
// Config-page: http://danilowoz.com/create-react-content-loader/
10+
const LoadingWrapper = styled.div`
11+
width: 100%;
12+
overflow: hidden;
13+
`
14+
15+
const LoadingItem = ({ theme }) => (
16+
<ContentLoader
17+
height={100}
18+
width={500}
19+
speed={2}
20+
primaryColor={theme.loading.basic}
21+
secondaryColor={theme.loading.animate}
22+
>
23+
<rect x="168" y="9.69" rx="4" ry="4" width="183" height="8.0" />
24+
<rect x="168" y="46.28" rx="4" ry="4" width="269.36" height="5.0" />
25+
<rect x="5" y="5.38" rx="5" ry="1" width="151.5" height="86.0194" />
26+
<rect x="168" y="28.2" rx="4" ry="4" width="140.5" height="6.0" />
27+
<rect x="283.02" y="141.21" rx="4" ry="4" width="86.5" height="9.76" />
28+
<circle cx="175.31" cy="79.07" r="8.313" />
29+
<rect x="190" y="77.2" rx="0" ry="0" width="60" height="4" />
30+
</ContentLoader>
31+
)
32+
33+
const VideoItemLoading = ({ num, theme }) => {
34+
// const ukey = uid.gen()
35+
const range = R.range(0, num)
36+
return range.map(() => (
37+
<LoadingWrapper key={uid.gen()}>
38+
<LoadingItem uniquekey={uid.gen()} theme={theme} />
39+
</LoadingWrapper>
40+
))
41+
}
42+
43+
VideoItemLoading.propTypes = {
44+
num: PropTypes.number,
45+
}
46+
47+
VideoItemLoading.defaultProps = {
48+
num: 1,
49+
}
50+
51+
export default withTheme(VideoItemLoading)

‎components/LoadingEffects/index.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66

77
export { default as CheatSheetLoading } from './CheatSheetLoading'
88
export { default as CommentLoading } from './CommentLoading'
9-
export { default as PostLoading } from './PostLoading'
10-
export { default as PostsLoading } from './PostsLoading'
9+
export { default as PostItemLoading } from './PostItemLoading'
10+
export { default as VideoItemLoading } from './VideoItemLoading'
11+
export { default as RepoItemLoading } from './RepoItemLoading'
12+
export { default as JobItemLoading } from './JobItemLoading'
1113
export { default as TypeWriterLoading } from './TypeWriterLoading'
14+
15+
export { default as ArticleContentLoading } from './ArticleContentLoading'

‎components/index.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,19 @@ export { default as UserCell } from './UserCell'
4242
export { default as SectionLabel } from './SectionLabel'
4343
export { default as BuyMeChuanChuan } from './BuyMeChuanChuan'
4444
export { default as VideoSourceInfo } from './VideoSourceInfo'
45-
//
45+
4646
export { default as GithubRepoPage } from './GithubRepoPage'
4747

4848
// loading component
4949
export {
5050
CommentLoading,
5151
CheatSheetLoading,
52-
PostLoading,
53-
PostsLoading,
52+
PostItemLoading,
53+
VideoItemLoading,
54+
RepoItemLoading,
55+
JobItemLoading,
5456
TypeWriterLoading,
57+
ArticleContentLoading,
5558
} from './LoadingEffects'
5659

5760
// UI library (currently use antd)

‎containers/ArticleViwer/Body.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22

33
import BodyHeader from './BodyHeader'
44
import BodyFooter from './BodyFooter'
5-
import { MarkDownRender, PostLoading } from '../../components'
5+
import { MarkDownRender, ArticleContentLoading } from '../../components'
66

77
import { Wrapper, ArticleTitle, ArticleBody } from './styles/body'
88

@@ -12,7 +12,7 @@ const Body = ({ data, loading, thread }) => (
1212
<ArticleTitle>{data.title}</ArticleTitle>
1313
{loading ? (
1414
<React.Fragment>
15-
<PostLoading num={2} />
15+
<ArticleContentLoading num={2} />
1616
</React.Fragment>
1717
) : (
1818
<ArticleBody>

‎containers/JobsThread/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import TagsBar from '../TagsBar'
1414

1515
import {
1616
Affix,
17-
PostsLoading,
17+
JobItemLoading,
1818
Pagi,
1919
EmptyThread,
2020
ContentFilter,
@@ -66,7 +66,7 @@ const View = ({ community, thread, entries, curView, active }) => {
6666
)
6767
}
6868
default:
69-
return <PostsLoading num={3} />
69+
return <JobItemLoading num={3} />
7070
}
7171
}
7272

‎containers/PostsThread/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import TagsBar from '../TagsBar'
1212

1313
import {
1414
Affix,
15-
PostsLoading,
15+
PostItemLoading,
1616
Pagi,
1717
EmptyThread,
1818
ContentFilter,
@@ -62,7 +62,7 @@ const View = ({ community, thread, entries, curView, active }) => {
6262
)
6363
}
6464
default:
65-
return <PostsLoading num={5} />
65+
return <PostItemLoading num={5} />
6666
}
6767
}
6868

‎containers/ReposThread/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import TagsBar from '../TagsBar'
1313

1414
import {
1515
Affix,
16-
PostsLoading,
16+
RepoItemLoading,
1717
Pagi,
1818
EmptyThread,
1919
ContentFilter,
@@ -59,7 +59,7 @@ const View = ({ community, thread, entries, curView, active }) => {
5959
)
6060
}
6161
default:
62-
return <PostsLoading num={5} />
62+
return <RepoItemLoading num={5} />
6363
}
6464
}
6565

‎containers/UserFavorites/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React from 'react'
88
import { inject, observer } from 'mobx-react'
99

1010
import FavoritesCats from '../FavoritesCats'
11-
import { PostsLoading, Pagi, PostItem } from '../../components'
11+
import { PostItemLoading, Pagi, PostItem } from '../../components'
1212

1313
import { uid, makeDebugger, storePlug, TYPE } from '../../utils'
1414
import * as logic from './logic'
@@ -33,7 +33,7 @@ const View = ({ entries, curView, active }) => {
3333
)
3434
}
3535
default:
36-
return <PostsLoading num={5} />
36+
return <PostItemLoading num={5} />
3737
}
3838
}
3939

‎containers/VideosThread/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import TagsBar from '../TagsBar'
1212

1313
import {
1414
Affix,
15-
PostsLoading,
15+
VideoItemLoading,
1616
Pagi,
1717
EmptyThread,
1818
ContentFilter,
@@ -63,7 +63,7 @@ const View = ({ community, thread, entries, curView, active }) => {
6363
)
6464
}
6565
default:
66-
return <PostsLoading num={5} />
66+
return <VideoItemLoading num={5} />
6767
}
6868
}
6969

0 commit comments

Comments
 (0)