viser spinner mens data lastes

src/App.vue

@@ -11,6 +11,7 @@
         <input type="submit" name="" value="Yay!">
       </form>
     </div>
+    <img id="spinner" :class="waiting ? 'show' : 'hide'" src="./assets/spinner.gif" alt="" />
     <SearchResults :hits="search_results" :lang="query_lang" />
     <Article :article="article" />
   </div>
@@ -36,6 +37,7 @@ export default {
       query_lang: params.get('lang'),
       path_lang: path.pop(),
       search_results: [],
+      waiting: true,
       article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
       /*search: function(q) {
         return new Promise(resolve => {
@@ -85,6 +87,7 @@ export default {
       axios.get(api_endpoint + self.query_lang + '/article' + '?expand_lemmas=true&lemma_text=' + self.search_query)
       .then(function(response){
         self.search_results = response.data
+        self.waiting = false
       })
     }
     else if(this.article_id)
@@ -92,8 +95,12 @@ export default {
       axios.get(api_endpoint + self.path_lang + '/article' + '/' + self.article_id + '?expand_lemmas=true&expand_refs=true')
       .then(function(response){
         self.article = response.data
+        self.waiting = false
       })
     }
+    else {
+      this.waiting = false
+    }
   }
 }
 </script>
@@ -109,6 +116,14 @@ export default {
   margin-right: 10%;
 }
 
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}
+
 .autocomplete {
   width: 25em;
 }