Loading animation improvements

.gitignore

@@ -4,4 +4,5 @@
 **/dist/*
 .env.local
 nbactions.xml
+nb-configuration.xml
 .env.development.local

vospace-ui-backend/src/main/resources/auth.properties

@@ -3,6 +3,6 @@ client_secret=@client_secret@
 rap_uri=@rap_uri@
 gms_uri=@gms_uri@
 
-groups_autoload=false
+groups_autoload=true
 store_state_on_login_endpoint=true
 scope=openid email profile read:rap

vospace-ui-frontend/src/App.vue

@@ -9,7 +9,7 @@
     —&nbsp;Powered by <img alt="IA2 logo" src="./assets/ia2-logo-footer.png">
     <strong class="text-primary"><a href="http://www.ia2.inaf.it/" target="blank_">IA2</a></strong>&nbsp;—
   </footer>
-  <div id="loading" v-if="loading">
+  <div id="loading" v-if="loading" class="loading">
     <div class="spinner-wrapper">
       <b-spinner variant="primary" style="width: 3rem; height: 3rem;" label="Loading"></b-spinner>
     </div>
@@ -61,7 +61,7 @@ export default {
   left: 0;
 }
 
-#loading {
+.loading {
   position: fixed;
   top: 0;
   bottom: 0;

vospace-ui-frontend/src/api/server/index.js

@@ -16,7 +16,9 @@ function apiRequest(options, showLoading = true, handleValidationErrors = false)
         } else {
           resolve(response.data);
         }
+        if (showLoading) {
           store.commit('setLoading', false);
+        }
       })
       .catch(error => {
         store.commit('setLoading', false);

vospace-ui-frontend/src/components/Jobs.vue

@@ -17,13 +17,28 @@
       </tr>
     </tbody>
   </table>
+  <div id="jobs-loading" v-if="jobsLoading" class="loading">
+    <div class="spinner-wrapper">
+      <b-spinner variant="primary" style="width: 3rem; height: 3rem;" label="Loading"></b-spinner>
+    </div>
+  </div>
 </div>
 </template>
 
 <script>
 export default {
   computed: {
-    jobs() { return this.$store.state.jobs }
+    jobs() { return this.$store.state.jobs },
+    jobsLoading() { return this.$store.state.jobsLoading }
+  },
+  mounted() {
+    this.loadJobs();
+    this.$store.commit('setLoading', false);
+  },
+  methods: {
+    loadJobs() {
+      this.$store.dispatch('loadJobs');
+    }
   }
 }
 </script>

vospace-ui-frontend/src/store.js

@@ -13,6 +13,7 @@ export default new Vuex.Store({
     loading: true,
     asyncButtonEnabled: false,
     jobs: [],
+    jobsLoading: true,
     user: 'anonymous',
     nodeToDelete: null,
     writable: false
@@ -41,6 +42,9 @@ export default new Vuex.Store({
     addJob(state, job) {
       state.jobs.push(job);
     },
+    setJobsLoading(state, loading) {
+      state.jobsLoading = loading;
+    },
     setUsername(state, username) {
       state.user = username;
     },
@@ -83,8 +87,10 @@ export default new Vuex.Store({
         });
     },
     loadJobs({ commit }) {
+      commit('setJobsLoading', true);
       client.loadJobs()
-        .then(jobs => commit('setJobs', jobs));
+        .then(jobs => commit('setJobs', jobs))
+        .finally(() => commit('setJobsLoading', false));
     },
     loadUserInfo({ commit }) {
       client.getUserInfo()