Load releases asynchronously

src/components/Releases/Releases.vue

@@ -1,5 +1,6 @@
 <template lang="html">
     <div class="releases">
+        <template v-if="loaded">
             <github-button href="https://github.com/romancmx/gamebrary/subscription" data-show-count="true" aria-label="Watch romancmx/gamebrary on GitHub">Watch</github-button>
             <github-button href="https://github.com/romancmx/gamebrary" data-show-count="true" aria-label="Star romancmx/gamebrary on GitHub">Star</github-button>
             <github-button href="https://github.com/romancmx/gamebrary/fork" data-show-count="true" aria-label="Fork romancmx/gamebrary on GitHub">Fork</github-button>
@@ -23,6 +24,9 @@
 
                 <vue-markdown :source="notification.body" />
             </div>
+        </template>
+
+        <releases-placeholder v-else />
     </div>
 </template>
 
@@ -40,14 +44,35 @@ export default {
         ReleasesPlaceholder,
     },
 
+    data() {
+        return {
+            loaded: false,
+        };
+    },
+
     computed: {
         ...mapState(['releases']),
     },
 
+    mounted() {
+        this.loaded = Boolean(this.releases);
+
+        if (!this.releases) {
+            this.load();
+        }
+    },
+
     methods: {
         formattedDate(date) {
             return moment(date).fromNow();
         },
+
+        load() {
+            this.$store.dispatch('LOAD_RELEASES')
+                .then(() => {
+                    this.loaded = true;
+                });
+        },
     },
 };
 </script>