git.iko.soy/bridge
on master help sign in
Add loading placeholder text for points
c9c3868pkova
src/components/PointList.js+3−4
compare with master
unifiedsplit
@@ -4,12 +4,12 @@ import { Row } from './Base'
4import RenderedPoint from './RenderedPoint'
4import RenderedPoint from './RenderedPoint'
5
5
6const PointList = props => {
6const PointList = props => {
7− const { setPointCursor, routeHandler, points } = props
7+ const { setPointCursor, routeHandler, points, loading } = props
8 const chunks = lodash.chunk(points, 3)
8 const chunks = lodash.chunk(points, 3)
9
9
10 return (
10 return (
11 points.length === 0
11 points.length === 0
12− ? <p>{'No points to display'}</p>
12+ ? <p>{loading ? 'Loading...' : 'No points to display' }</p>
13 : lodash.map(chunks, (chunk, idx) =>
13 : lodash.map(chunks, (chunk, idx) =>
14 <Row key={ `render-row-${idx}` }>
14 <Row key={ `render-row-${idx}` }>
15 {
15 {
@@ -23,8 +23,7 @@ const PointList = props => {
23 }
23 }
24 </Row>
24 </Row>
25 )
25 )
26−
27−)
26+ )
28}
27}
29
28
30export default PointList
29export default PointList
src/views/Points.js+6−3
@@ -27,7 +27,8 @@ class Points extends React.Component {
27 managing: [],
27 managing: [],
28 voting: [],
28 voting: [],
29 spawning: [],
29 spawning: [],
30− eclipticOwner: false
30+ eclipticOwner: false,
31+ loading: true
31 }
32 }
32 }
33 }
33
34
@@ -66,7 +67,8 @@ class Points extends React.Component {
66 managing,
67 managing,
67 voting,
68 voting,
68 spawning,
69 spawning,
69− eclipticOwner
70+ eclipticOwner,
71+ loading: false
70 })
72 })
71
73
72 this.cachePoints(ctrcs, addToPointCache, points)
74 this.cachePoints(ctrcs, addToPointCache, points)
@@ -84,7 +86,7 @@ class Points extends React.Component {
84 const { setPointCursor, pushRoute } = this.props
86 const { setPointCursor, pushRoute } = this.props
85 const { pointCache } = this.props
87 const { pointCache } = this.props
86
88
87− const { points, incoming, managing, voting, spawning } = this.state
89+ const { points, incoming, managing, voting, spawning, loading } = this.state
88 const { eclipticOwner } = this.state
90 const { eclipticOwner } = this.state
89
91
90 const lookupPointButton =
92 const lookupPointButton =
@@ -227,6 +229,7 @@ class Points extends React.Component {
227 setPointCursor={ setPointCursor }
229 setPointCursor={ setPointCursor }
228 routeHandler={ pushRoute }
230 routeHandler={ pushRoute }
229 points={ points }
231 points={ points }
232+ loading={ loading }
230 />
233 />
231
234
232 { managingPoints }
235 { managingPoints }