split BusView into "loading" and "refreshing" states

Author: hawkrives

source/views/transportation/bus/bus-view.js

@@ -24,13 +24,17 @@ export class BusView extends React.PureComponent {
   state = {
     busLines: defaultData.data,
     intervalId: 0,
-    loading: false,
+    loading: true,
+    refreshing: false,
     now: moment.tz(TIMEZONE),
     // now: moment.tz('Fri 8:13pm', 'ddd h:mma', true, TIMEZONE),
   }
 
   componentWillMount() {
-    this.fetchData()
+    this.fetchData().then(() => {
+      this.setState(() => ({loading: false}))
+    })
+
     // This updates the screen every second, so that the "next bus" times
     // are updated without needing to leave and come back.
     this.setState(() => ({intervalId: setInterval(this.updateTime, 1000)}))
@@ -50,11 +54,7 @@ export class BusView extends React.PureComponent {
       busLines = defaultData.data
     }
 
-    this.setState(() => ({
-      busLines,
-      now: moment.tz(TIMEZONE),
-      loading: false,
-    }))
+    this.setState(() => ({busLines, now: moment.tz(TIMEZONE)}))
   }
 
   updateTime = () => {
@@ -63,13 +63,16 @@ export class BusView extends React.PureComponent {
 
   refreshTime = async () => {
     const start = Date.now()
-    this.setState(() => ({loading: true}))
+    this.setState(() => ({refreshing: true}))
+
     this.updateTime()
+
     const elapsed = Date.now() - start
     if (elapsed < 500) {
       await delay(500 - elapsed)
     }
-    this.setState(() => ({loading: false}))
+
+    this.setState(() => ({refreshing: false}))
   }
 
   openMap = () => {
@@ -96,15 +99,15 @@ export class BusView extends React.PureComponent {
       )
     }
 
+    const refreshControl = (
+      <RefreshControl
+        onRefresh={this.refreshTime}
+        refreshing={this.state.refreshing}
+      />
+    )
+
     return (
-      <ScrollView
-        refreshControl={
-          <RefreshControl
-            onRefresh={this.refreshTime}
-            refreshing={this.state.loading}
-          />
-        }
-      >
+      <ScrollView refreshControl={refreshControl}>
         <BusLine line={activeBusLine} now={now} openMap={this.openMap} />
       </ScrollView>
     )