chore: isolated loadings

3 files changed, 7 insertions, 22 deletions

diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue
index d4ffa9f..fd6d731 100644
--- a/src/components/HeaderBlue.vue
+++ b/src/components/HeaderBlue.vue
@@ -1,7 +1,5 @@
 <template lang="pug">
-  header(:class="{active: loading}")
-    #big-loading(v-if="loading")
-      b-overlay(:show="true" spinner-large)
+  header
     b-container
       h1
         a(href="/" rel="home") Gico
@@ -10,10 +8,5 @@
 <script>
 export default {
   name: "HeaderBlue",
-  computed: {
-    loading: function() {
-      return this.$store.getters.loading;
-    },
-  }
 }
 </script>
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index 21f11bb..e64a031 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -6,20 +6,6 @@ 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/views/Home.vue b/src/views/Home.vue
index c1d9420..3ca1445 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,7 +6,10 @@
         b-col(md="8" sm="12")
           h2 List of commits
           section#commits
+            .commit(style="padding: 50px" v-if="loading")
+              b-overlay(:show="true" spinner-large)
             commit-card(
+              v-else
               v-for="i in commits" :key="i.hash" :data="i"
               :author="emails[i.author_email]"
               :committer="emails[i.committer_email]"
@@ -35,6 +38,9 @@ export default {
     emails: function() {
       return this.$store.getters.emails;
     },
+    loading: function() {
+      return this.$store.getters.loading;
+    }
   }
 }
 </script>