fix(LoadingBar): add JobItemLoadingBar

Author: mydearxym

components/LoadingEffects/JobItemLoading.js

@@ -0,0 +1,55 @@
+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={63}
+    width={500}
+    speed={2}
+    primaryColor={theme.loading.basic}
+    secondaryColor={theme.loading.animate}
+  >
+    <rect x="283.02" y="141.21" rx="4" ry="4" width="86.5" height="9" />
+    <rect x="6" y="7.2" rx="0" ry="0" width="205" height="9" />
+    <rect x="6" y="26.2" rx="0" ry="0" width="89" height="8" />
+    <rect x="105" y="28.2" rx="0" ry="0" width="81" height="7" />
+    <rect x="6" y="43.2" rx="0" ry="0" width="197" height="7" />
+    <rect x="283" y="7.25" rx="0" ry="0" width="136.8" height="8.52" />
+    <rect x="283" y="41.2" rx="0" ry="0" width="98.28" height="7.99" />
+    <rect x="457.36" y="8.2" rx="0" ry="0" width="38.68" height="37.84" />
+    <rect x="283" y="24.2" rx="0" ry="0" width="34" height="8.58" />
+    <rect x="327.44" y="24.2" rx="0" ry="0" width="27" height="8.58" />
+    <rect x="364.44" y="24.2" rx="0" ry="0" width="34" height="8.58" />
+  </ContentLoader>
+)
+
+const JobItemLoading = ({ 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>
+  ))
+}
+
+JobItemLoading.propTypes = {
+  num: PropTypes.number,
+}
+
+JobItemLoading.defaultProps = {
+  num: 1,
+}
+
+export default withTheme(JobItemLoading)

components/LoadingEffects/index.js

@@ -9,6 +9,7 @@ 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 JobItemLoading } from './JobItemLoading'
 export { default as TypeWriterLoading } from './TypeWriterLoading'
 
 export { default as ArticleContentLoading } from './ArticleContentLoading'

components/index.js

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

containers/JobsThread/index.js

@@ -14,7 +14,7 @@ import TagsBar from '../TagsBar'
 
 import {
   Affix,
-  PostItemLoading,
+  JobItemLoading,
   Pagi,
   EmptyThread,
   ContentFilter,
@@ -47,6 +47,7 @@ const View = ({ community, thread, entries, curView, active }) => {
     case TYPE.RESULT: {
       return (
         <React.Fragment>
+          <JobItemLoading num={1} />
           {entries.map(entry => (
             <JobItem
               entry={entry}
@@ -66,7 +67,7 @@ const View = ({ community, thread, entries, curView, active }) => {
       )
     }
     default:
-      return <PostItemLoading num={3} />
+      return <JobItemLoading num={3} />
   }
 }