Client - add spinner on loading activities

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)

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 =>

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 (
       <div className="card  activity-card">
         <div className="card-body">
@@ -24,7 +24,8 @@ export default class ActivitiesList extends React.PureComponent {
               </tr>
             </thead>
             <tbody>
-              {sports &&
+              {!loading &&
+                sports &&
                 activities.map((activity, idx) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <tr key={idx}>
@@ -61,6 +62,7 @@ export default class ActivitiesList extends React.PureComponent {
                 ))}
             </tbody>
           </table>
+          {loading && <div className="loader" />}
         </div>
       </div>
     )

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 {
               <div className="col-md-9 activities-result">
                 <ActivitiesList
                   activities={activities}
+                  loading={loading}
                   sports={sports}
                   t={t}
                   user={user}
@@ -101,6 +103,7 @@ export default withTranslation()(
   connect(
     state => ({
       activities: state.activities.data,
+      loading: state.loading,
       message: state.message,
       sports: state.sports.data,
       user: state.user,

fittrackee_client/src/components/App.css

@@ -349,12 +349,12 @@ label {
 
 .loader {
   animation: spin 2s linear infinite;
-  border: 16px solid #f3f3f3;
+  border: 8px solid #f3f3f3;
-  border-top: 16px solid #3498db;
+  border-top: 8px solid #3498db;
   border-radius: 50%;
-  height: 120px;
+  height: 60px;
   margin-left: 41%;
-  width: 120px;
+  width: 60px;
 }
 
 @keyframes spin {