feat: add loading

5 files changed, 48 insertions, 17 deletions

diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue
new file mode 100644
index 0000000..d4ffa9f
--- /dev/null
+++ b/src/components/HeaderBlue.vue
@@ -0,0 +1,19 @@
+<template lang="pug">
+  header(:class="{active: loading}")
+    #big-loading(v-if="loading")
+      b-overlay(:show="true" spinner-large)
+    b-container
+      h1
+        a(href="/" rel="home") Gico
+</template>
+
+<script>
+export default {
+  name: "HeaderBlue",
+  computed: {
+    loading: function() {
+      return this.$store.getters.loading;
+    },
+  }
+}
+</script>
diff --git a/src/components/design/HeaderBlue.vue b/src/components/design/HeaderBlue.vue
deleted file mode 100644
index fd6d731..0000000
--- a/src/components/design/HeaderBlue.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template lang="pug">
-  header
-    b-container
-      h1
-        a(href="/" rel="home") Gico
-</template>
-
-<script>
-export default {
-  name: "HeaderBlue",
-}
-</script>
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index e64a031..21f11bb 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -6,6 +6,20 @@ header
   padding: 10px 0
   box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
   margin-bottom: 30px
+  &.active
+    z-index: 1044
+  #big-loading
+    top: 0
+    width: 100%
+    height: 100%
+    position: fixed
+    z-index: 1045
+    .b-overlay-wrap
+      height: 100%
+      background-color: rgba(0, 0, 0, .8)
+      .spinner-border
+        border-color: $primary
+        border-right-color: transparent
   h1
     font-size: 3em
     margin: 0
diff --git a/src/store.js b/src/store.js
index 888add2..dab3529 100644
--- a/src/store.js
+++ b/src/store.js
@@ -6,10 +6,14 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     api: process.env.VUE_APP_BACKEND_URL,
+    loading: false,
     commits: [],
     emails: {},
   },
-  get: {
+  getters: {
+    loading: state => {
+      return state.loading
+    },
     commits: state => {
       return state.commits
     },
@@ -18,24 +22,29 @@ export default new Vuex.Store({
     },
   },
   mutations: {
+    loading_state: (state, value) => {
+      state.loading = value
+    },
     load_commits: (state, value) => {
       state.commits = value
     },
     load_emails: (state, value) => {
-      console.log(JSON.stringify(value))
       state.emails = value
     },
   },
   actions: {
     // Get all commits from the api backend
     async get_commits({commit}) {
+      commit('loading_state', true)
       await fetch(`${this.state.api}/commit/`)
         .then(async response => {
           commit('load_commits', await response.json());
         })
+      commit('loading_state', false)
     },
     // Get all emails and map them like an hash
     async get_emails({commit}) {
+      commit('loading_state', true)
       await fetch(`${this.state.api}/email/`)
         .then(async response => {
           const emails_list = await response.json();
@@ -47,6 +56,7 @@ export default new Vuex.Store({
 
           commit('load_emails', emails_obj);
         })
+      commit('loading_state', false)
     },
   },
   modules: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e507ef8..b5fbda0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import HeaderBlue from '@/components/design/HeaderBlue';
+import HeaderBlue from '@/components/HeaderBlue';
 
 export default {
   name: "Home",
@@ -19,10 +19,10 @@ export default {
   },
   computed: {
     commits: () => {
-      return this.$store.get.commits;
+      return this.$store.getters.commits;
     },
     emails: () => {
-      return this.$store.get.emails;
+      return this.$store.getters.emails;
     },
   }
 }