feat(LoadingBar): add RepoLoadingBar

Author: mydearxym

components/LoadingEffects/RepoItemLoading.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import R from 'ramda'
+import PropTypes from 'prop-types'
+import styled, { withTheme } from 'styled-components'
+import ContentLoader from 'react-content-loader'
+
+import { uid } from '../../utils'
+
+// Config-page: http://danilowoz.com/create-react-content-loader/
+const LoadingWrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+`
+
+const LoadingItem = ({ theme }) => (
+  <ContentLoader
+    height={80}
+    width={500}
+    speed={2}
+    primaryColor={theme.loading.basic}
+    secondaryColor={theme.loading.animate}
+  >
+    <rect x="13" y="10.69" rx="4" ry="4" width="183" height="8.64" />
+    <rect x="13" y="29.22" rx="4" ry="4" width="401.3464" height="5.2" />
+    <rect x="13" y="43.2" rx="4" ry="4" width="331.58" height="5.2" />
+    <rect x="283.02" y="141.21" rx="4" ry="4" width="86.5" height="9.76" />
+    <rect x="433" y="12.2" rx="0" ry="0" width="60" height="5.6" />
+    <rect x="13" y="58.2" rx="0" ry="0" width="137" height="6.5" />
+  </ContentLoader>
+)
+
+const RepoItemLoading = ({ num, theme }) => {
+  // const ukey = uid.gen()
+  const range = R.range(0, num)
+  return range.map(() => (
+    <LoadingWrapper key={uid.gen()}>
+      <LoadingItem uniquekey={uid.gen()} theme={theme} />
+    </LoadingWrapper>
+  ))
+}
+
+RepoItemLoading.propTypes = {
+  num: PropTypes.number,
+}
+
+RepoItemLoading.defaultProps = {
+  num: 1,
+}
+
+export default withTheme(RepoItemLoading)

components/LoadingEffects/VideoItemLoading.js

@@ -30,7 +30,7 @@ const LoadingItem = ({ theme }) => (
   </ContentLoader>
 )
 
-const PostLoading = ({ num, theme }) => {
+const VideoItemLoading = ({ num, theme }) => {
   // const ukey = uid.gen()
   const range = R.range(0, num)
   return range.map(() => (
@@ -40,12 +40,12 @@ const PostLoading = ({ num, theme }) => {
   ))
 }
 
-PostLoading.propTypes = {
+VideoItemLoading.propTypes = {
   num: PropTypes.number,
 }
 
-PostLoading.defaultProps = {
+VideoItemLoading.defaultProps = {
   num: 1,
 }
 
-export default withTheme(PostLoading)
+export default withTheme(VideoItemLoading)

components/LoadingEffects/index.js

@@ -8,6 +8,7 @@ export { default as CheatSheetLoading } from './CheatSheetLoading'
 export { default as CommentLoading } from './CommentLoading'
 export { default as PostItemLoading } from './PostItemLoading'
 export { default as VideoItemLoading } from './VideoItemLoading'
+export { default as RepoItemLoading } from './RepoItemLoading'
 export { default as TypeWriterLoading } from './TypeWriterLoading'
 
 export { default as ArticleContentLoading } from './ArticleContentLoading'

components/index.js

@@ -51,6 +51,7 @@ export {
   CheatSheetLoading,
   PostItemLoading,
   VideoItemLoading,
+  RepoItemLoading,
   TypeWriterLoading,
   ArticleContentLoading,
 } from './LoadingEffects'

containers/ReposThread/index.js

@@ -13,7 +13,7 @@ import TagsBar from '../TagsBar'
 
 import {
   Affix,
-  PostItemLoading,
+  RepoItemLoading,
   Pagi,
   EmptyThread,
   ContentFilter,
@@ -45,6 +45,7 @@ const View = ({ community, thread, entries, curView, active }) => {
     case TYPE.RESULT: {
       return (
         <React.Fragment>
+          <RepoItemLoading num={1} />
           {entries.map(entry => (
             <RepoItem key={uid.gen()} entry={entry} active={active} />
           ))}
@@ -59,7 +60,7 @@ const View = ({ community, thread, entries, curView, active }) => {
       )
     }
     default:
-      return <PostItemLoading num={5} />
+      return <RepoItemLoading num={5} />
   }
 }