diff --git a/fittrackee_client/src/actions/activities.js b/fittrackee_client/src/actions/activities.js index 997f1084..009bad1f 100644 --- a/fittrackee_client/src/actions/activities.js +++ b/fittrackee_client/src/actions/activities.js @@ -48,7 +48,10 @@ export const addActivity = form => dispatch => } dispatch(setLoading(false)) }) - .catch(error => dispatch(setError(`activities|${error}`))) + .catch(error => { + dispatch(setLoading(false)) + dispatch(setError(`activities|${error}`)) + }) export const addActivityWithoutGpx = form => dispatch => FitTrackeeGenericApi.addData('activities/no_gpx', form) @@ -150,7 +153,10 @@ export const editActivity = form => dispatch => } dispatch(setLoading(false)) }) - .catch(error => dispatch(setError(`activities|${error}`))) + .catch(error => { + dispatch(setLoading(false)) + dispatch(setError(`activities|${error}`)) + }) export const getMoreActivities = params => dispatch => FitTrackeeGenericApi.getData('activities', params) diff --git a/fittrackee_client/src/actions/index.js b/fittrackee_client/src/actions/index.js index 0fd33458..e4697585 100644 --- a/fittrackee_client/src/actions/index.js +++ b/fittrackee_client/src/actions/index.js @@ -25,7 +25,9 @@ export const setLoading = loading => ({ }) export const getOrUpdateData = (action, target, data) => dispatch => { + dispatch(setLoading(true)) if (data && data.id && isNaN(data.id)) { + dispatch(setLoading(false)) return dispatch(setError(`${target}|Incorrect id`)) } return FitTrackeeApi[action](target, data) @@ -35,8 +37,12 @@ export const getOrUpdateData = (action, target, data) => dispatch => { } else { dispatch(setError(`${target}|${ret.message || ret.status}`)) } + dispatch(setLoading(false)) + }) + .catch(error => { + dispatch(setLoading(false)) + dispatch(setError(`${target}|${error}`)) }) - .catch(error => dispatch(setError(`${target}|${error}`))) } export const addData = (target, data) => dispatch => diff --git a/fittrackee_client/src/components/Activities/ActivitiesList.jsx b/fittrackee_client/src/components/Activities/ActivitiesList.jsx index 32679845..de7dd650 100644 --- a/fittrackee_client/src/components/Activities/ActivitiesList.jsx +++ b/fittrackee_client/src/components/Activities/ActivitiesList.jsx @@ -7,7 +7,7 @@ import { getDateWithTZ } from '../../utils' export default class ActivitiesList extends React.PureComponent { render() { - const { activities, sports, t, user } = this.props + const { activities, loading, sports, t, user } = this.props return (
@@ -24,7 +24,8 @@ export default class ActivitiesList extends React.PureComponent { - {sports && + {!loading && + sports && activities.map((activity, idx) => ( // eslint-disable-next-line react/no-array-index-key @@ -61,6 +62,7 @@ export default class ActivitiesList extends React.PureComponent { ))} + {loading &&
}
) diff --git a/fittrackee_client/src/components/Activities/index.jsx b/fittrackee_client/src/components/Activities/index.jsx index 1eba78a0..76adffd4 100644 --- a/fittrackee_client/src/components/Activities/index.jsx +++ b/fittrackee_client/src/components/Activities/index.jsx @@ -38,6 +38,7 @@ class Activities extends React.Component { render() { const { activities, + loading, loadActivities, loadMoreActivities, message, @@ -71,6 +72,7 @@ class Activities extends React.Component {
({ activities: state.activities.data, + loading: state.loading, message: state.message, sports: state.sports.data, user: state.user, diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css index 56a4014f..5a60d507 100644 --- a/fittrackee_client/src/components/App.css +++ b/fittrackee_client/src/components/App.css @@ -349,12 +349,12 @@ label { .loader { animation: spin 2s linear infinite; - border: 16px solid #f3f3f3; - border-top: 16px solid #3498db; + border: 8px solid #f3f3f3; + border-top: 8px solid #3498db; border-radius: 50%; - height: 120px; + height: 60px; margin-left: 41%; - width: 120px; + width: 60px; } @keyframes spin {