From 34614d5a6c29f4911d92db33d36fe95721b39f33 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Fri, 31 Jan 2020 11:03:03 +0100
Subject: [PATCH] Client - add spinner on loading activities

---
 fittrackee_client/src/actions/activities.js            | 10 ++++++++--
 fittrackee_client/src/actions/index.js                 |  8 +++++++-
 .../src/components/Activities/ActivitiesList.jsx       |  6 ++++--
 fittrackee_client/src/components/Activities/index.jsx  |  3 +++
 fittrackee_client/src/components/App.css               |  8 ++++----
 5 files changed, 26 insertions(+), 9 deletions(-)

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 (
       <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>
     )
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 {
               <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,
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 {