add loading

src/actions/index.js

@@ -101,6 +101,7 @@ export function fetchDomain () {
         if (Object.values(result).some(resp => resp.hasOwnProperty('error'))) {
           throw new Error('Some URLs returned negative. If you are in development, check the server is running')
         }
+        dispatch(toggleFetchingDomain())
         return result
       })
       .catch(err => {
@@ -192,6 +193,20 @@ export function toggleFilter (filter, value) {
   }
 }
 
+export const SET_LOADING = 'SET_LOADING'
+export function setLoading () {
+  return {
+    type: SET_LOADING
+  }
+}
+
+export const SET_NOT_LOADING = 'SET_NOT_LOADING'
+export function setNotLoading () {
+  return {
+    type: SET_NOT_LOADING
+  }
+}
+
 export const UPDATE_TIMERANGE = 'UPDATE_TIMERANGE'
 export function updateTimeRange (timerange) {
   return {

src/components/Layout.js

@@ -219,6 +219,7 @@ class Dashboard extends React.Component {
           </StaticPage>
         )}
         <LoadingOverlay
+          isLoading={app.loading || app.flags.isFetchingDomain}
           ui={app.flags.isFetchingDomain}
           language={app.language}
         />

src/components/Timeline.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
+import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as d3 from 'd3'
 import * as selectors from '../selectors'
+import { setLoading, setNotLoading } from '../actions'
 import hash from 'object-hash'
 
 import copy from '../common/data/copy.json'
@@ -376,6 +378,8 @@ class Timeline extends React.Component {
                 onSelect={this.props.methods.onSelect}
                 dims={dims}
                 features={this.props.features}
+                setLoading={this.props.actions.setLoading}
+                setNotLoading={this.props.actions.setNotLoading}
               />
             </svg>
           </div>
@@ -409,4 +413,13 @@ function mapStateToProps (state) {
   }
 }
 
-export default connect(mapStateToProps)(Timeline)
+function mapDispatchToProps (dispatch) {
+  return {
+    actions: bindActionCreators({ setLoading, setNotLoading }, dispatch)
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Timeline)

src/components/presentational/Timeline/Events.js

@@ -69,7 +69,9 @@ const TimelineEvents = ({
   onSelect,
   transitionDuration,
   dims,
-  features
+  features,
+  setLoading,
+  setNotLoading
 }) => {
   const narIds = narrative ? narrative.steps.map(s => s.id) : []
 

src/reducers/app.js

@@ -20,7 +20,9 @@ import {
   TOGGLE_NOTIFICATIONS,
   TOGGLE_COVER,
   FETCH_ERROR,
-  FETCH_SOURCE_ERROR
+  FETCH_SOURCE_ERROR,
+  SET_LOADING,
+  SET_NOT_LOADING
 } from '../actions'
 
 function updateHighlighted (appState, action) {
@@ -212,6 +214,20 @@ function fetchSourceError (appState, action) {
   }
 }
 
+function setLoading (appState) {
+  return {
+    ...appState,
+    loading: true
+  }
+}
+
+function setNotLoading (appState) {
+  return {
+    ...appState,
+    loading: false
+  }
+}
+
 function app (appState = initial.app, action) {
   switch (action.type) {
     case UPDATE_HIGHLIGHTED:
@@ -254,6 +270,10 @@ function app (appState = initial.app, action) {
       return fetchError(appState, action)
     case FETCH_SOURCE_ERROR:
       return fetchSourceError(appState, action)
+    case SET_LOADING:
+      return setLoading(appState)
+    case SET_NOT_LOADING:
+      return setNotLoading(appState)
     default:
       return appState
   }

src/store/initial.js

@@ -93,7 +93,8 @@ const initial = {
       title: 'project title',
       subtitle: 'project subtitle',
       description: 'A description of the project goes here.\n\nThis description may contain markdown.\n\n# This is a large title, for example.\n\n## Whereas this is a slightly smaller title.\n\nCheck out docs/custom-covers.md in the [Timemap GitHub repo](https://github.com/forensic-architecture/timemap) for more information around how to specify custom covers.'
-    }
+    },
+    loading: false
   },
 
   /*