Use fetch status for stop viewer loading spinner

lib/actions/api.js

@@ -540,14 +540,16 @@ export function findGeometryForTrip (params) {
   )
 }
 
+const fetchingStopTimesForStop = createAction('FETCHING_STOP_TIMES_FOR_STOP')
 const findStopTimesForStopResponse = createAction('FIND_STOP_TIMES_FOR_STOP_RESPONSE')
 const findStopTimesForStopError = createAction('FIND_STOP_TIMES_FOR_STOP_ERROR')
 
 /**
  * Stop times for stop query (used in stop viewer).
  */
-export function findStopTimesForStop (params, clearData) {
+export function findStopTimesForStop (params) {
   return function (dispatch, getState) {
+    dispatch(fetchingStopTimesForStop(params))
     const { date, stopId, ...otherParams } = params
     let datePath = ''
     if (date) {
@@ -570,14 +572,6 @@ export function findStopTimesForStop (params, clearData) {
       queryParams.startTime = nowInSeconds
     }
 
-    // If reuqested, clear existing stop times to prevent extra rendering of stop viewer while schedule is
-    // fetched and a schedule for the same date/stop was shown before. This also has the nice side
-    // effect to force a render, initially showing the top row, after changing the schedule view date
-    // and all schedules for the new date are the same as the previous date.
-    if (clearData) {
-      dispatch(findStopTimesForStopResponse({ stopId, stopTimes: [] }))
-    }
-
     // (Re-)fetch stop times for the stop.
     dispatch(createQueryAction(
       `index/stops/${stopId}/stoptimes${datePath}?${qs.stringify(queryParams)}`,

lib/components/viewers/stop-schedule-table.js

@@ -3,6 +3,8 @@ import coreUtils from '@opentripplanner/core-utils'
 import React, { Component, createRef } from 'react'
 import styled from 'styled-components'
 
+import Loading from '../narrative/loading'
+import {FETCH_STATUS} from '../../util/constants'
 import {
   getFirstDepartureFromNow,
   mergeAndSortStopTimes
@@ -69,6 +71,10 @@ class StopScheduleTable extends Component {
 
   render () {
     const { date, stopData, timeFormat } = this.props
+    // Show loading spinner if times are still being fetched.
+    if (stopData.fetchStatus === FETCH_STATUS.FETCHING) {
+      return <Loading small />
+    }
     const mergedStopTimes = mergeAndSortStopTimes(stopData)
 
     // FIXME: Shift today back one day if the current time is between midnight and the end of the service day.

lib/components/viewers/stop-viewer.js

@@ -78,13 +78,7 @@ class StopViewer extends Component {
 
   _findStopTimesForDate = date => {
     const { findStopTimesForStop, viewedStop } = this.props
-
-    // When toggling views or changing dates,
-    // fetch stop times, and clear the existing stop times while fetching.
-    findStopTimesForStop({
-      date,
-      stopId: viewedStop.stopId
-    }, true)
+    findStopTimesForStop({ date, stopId: viewedStop.stopId })
   }
 
   _toggleScheduleView = () => {

lib/reducers/call-taker.js

@@ -2,19 +2,13 @@ import coreUtils from '@opentripplanner/core-utils'
 import update from 'immutability-helper'
 import moment from 'moment'
 
+import {FETCH_STATUS} from '../util/constants'
 import {getTimestamp} from '../util/state'
 
 const { randId } = coreUtils.storage
 
 const UPPER_RIGHT_CORNER = {x: 604, y: 53}
 
-const FETCH_STATUS = {
-  UNFETCHED: 0,
-  FETCHING: 1,
-  FETCHED: 2,
-  ERROR: -1
-}
-
 function createCallTakerReducer () {
   const initialState = {
     activeCall: null,

lib/reducers/create-otp-reducer.js

@@ -5,6 +5,7 @@ import objectPath from 'object-path'
 import coreUtils from '@opentripplanner/core-utils'
 
 import { MainPanelContent, MobileScreens } from '../actions/ui'
+import {FETCH_STATUS} from '../util/constants'
 import {getTimestamp} from '../util/state'
 import {isBatchRoutingEnabled} from '../util/itinerary'
 
@@ -772,11 +773,22 @@ function createOtpReducer (config, initialQuery) {
             }
           }
         })
+      case 'FETCHING_STOP_TIMES_FOR_STOP':
+        return update(state, {
+          transitIndex: {
+            stops: {
+              [action.payload.stopId]: {
+                fetchStatus: { $set: FETCH_STATUS.FETCHING }
+              }
+            }
+          }
+        })
       case 'FIND_STOP_TIMES_FOR_STOP_RESPONSE':
         return update(state, {
           transitIndex: {
             stops: {
               [action.payload.stopId]: {
+                fetchStatus: { $set: FETCH_STATUS.FETCHED },
                 stopTimes: { $set: action.payload.stopTimes },
                 stopTimesLastUpdated: { $set: new Date().getTime() }
               }

lib/util/constants.js

@@ -3,6 +3,13 @@ export const AUTH0_SCOPE = ''
 export const DEFAULT_APP_TITLE = 'OpenTripPlanner'
 export const PERSISTENCE_STRATEGY_OTP_MIDDLEWARE = 'otp_middleware'
 
+export const FETCH_STATUS = {
+  UNFETCHED: 0,
+  FETCHING: 1,
+  FETCHED: 2,
+  ERROR: -1
+}
+
 // Gets the root URL, e.g. https://otp-instance.example.com:8080, computed once for all.
 // TODO: support root URLs that involve paths or subfolders, as in https://otp-ui.example.com/path-to-ui/
 export const URL_ROOT = `${window.location.protocol}//${window.location.host}`