diff --git a/package.json b/package.json index 1a18b689..ea7f8e13 100644 --- a/package.json +++ b/package.json @@ -122,10 +122,11 @@ "react-router-redux": "^4.0.5", "react-simple-dnd": "^0.1.2", "react-toolbox": "^1.2.1", + "react-topbar-progress-indicator": "^1.0.0", "react-waypoint": "^3.1.3", "redux": "^3.3.1", - "redux-optimist": "^0.0.2", "redux-notifications": "^2.1.1", + "redux-optimist": "^0.0.2", "redux-thunk": "^1.0.3", "selection-position": "^1.0.0", "semaphore": "^1.0.5", diff --git a/src/containers/App.js b/src/containers/App.js index f9f8524f..a390406e 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -6,6 +6,7 @@ import { Layout, Panel, NavDrawer } from 'react-toolbox/lib/layout'; import { Navigation } from 'react-toolbox/lib/navigation'; import { Link } from 'react-toolbox/lib/link'; import { Notifs } from 'redux-notifications'; +import TopBarProgress from 'react-topbar-progress-indicator'; import { loadConfig } from '../actions/config'; import { loginUser } from '../actions/auth'; import { currentBackend } from '../backends/backend'; @@ -21,6 +22,16 @@ import AppHeader from '../components/AppHeader/AppHeader'; import { Loader, Toast } from '../components/UI/index'; import styles from './App.css'; +TopBarProgress.config({ + barColors: { + 0: '#3ab7a5', + '1.0': '#3ab7a5', + }, + shadowBlur: 5, + shadowColor: '#3ab7a5', + barThickness: 2, +}); + class App extends React.Component { static propTypes = { @@ -33,6 +44,7 @@ class App extends React.Component { navigateToCollection: PropTypes.func.isRequired, user: ImmutablePropTypes.map, runCommand: PropTypes.func.isRequired, + isFetching: PropTypes.bool.isRequired, }; static configError(config) { @@ -126,6 +138,7 @@ class App extends React.Component { runCommand, navigateToCollection, createNewEntryInCollection, + isFetching, } = this.props; if (config === null) { @@ -184,6 +197,7 @@ class App extends React.Component { toggleNavDrawer={this.toggleNavDrawer} /> + { isFetching && }
{children}
@@ -194,10 +208,10 @@ class App extends React.Component { } function mapStateToProps(state) { - const { auth, config, collections } = state; + const { auth, config, collections, global } = state; const user = auth && auth.get('user'); - - return { auth, config, collections, user }; + const { isFetching } = global; + return { auth, config, collections, user, isFetching }; } function mapDispatchToProps(dispatch) { diff --git a/src/reducers/global.js b/src/reducers/global.js new file mode 100644 index 00000000..0b67c53e --- /dev/null +++ b/src/reducers/global.js @@ -0,0 +1,17 @@ +/* Reducer for some global UI state that we want to share between components +* Now being used for isFetching state to display global loading indicator +* */ + +const globalReducer = (state = { isFetching: false }, action) => { + if ((action.type.indexOf('REQUEST') > -1)) { + return { isFetching: true }; + } else if ( + (action.type.indexOf('SUCCESS') > -1) || + (action.type.indexOf('FAILURE') > -1) + ) { + return { isFetching: false }; + } + return state; +}; + +export default globalReducer; diff --git a/src/reducers/index.js b/src/reducers/index.js index 86fc78af..4b3c4288 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -7,6 +7,7 @@ import editorialWorkflow, * as fromEditorialWorkflow from './editorialWorkflow'; import entryDraft from './entryDraft'; import collections from './collections'; import medias, * as fromMedias from './medias'; +import global from './global'; const reducers = { auth, @@ -18,6 +19,7 @@ const reducers = { editorialWorkflow, entryDraft, medias, + global, }; export default reducers; diff --git a/yarn.lock b/yarn.lock index 72b41dfd..2cf43b8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6811,6 +6811,12 @@ react-toolbox@^1.2.1: normalize.css "~5.0.0" react-css-themr "~1.4.1" +react-topbar-progress-indicator: + version "1.0.0" + resolved "https://registry.yarnpkg.com/react-topbar-progress-indicator/-/react-topbar-progress-indicator-1.0.0.tgz#3379ab2cb840c1bc1bc22fb5fc871688b9104dd4" + dependencies: + topbar "^0.1.3" + react-waypoint@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-3.1.3.tgz#1101fb8a27556a199150c7bfd34428606b5fc7e4" @@ -8043,6 +8049,10 @@ to-fast-properties@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320" +topbar@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/topbar/-/topbar-0.1.3.tgz#c9ef8776dc4469f7840e6416f4136ddeccf4b7c6" + tough-cookie@^2.3.1, tough-cookie@~2.3.0: version "2.3.1" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.1.tgz#99c77dfbb7d804249e8a299d4cb0fd81fef083fd"