show loading wheel on search

NUXT/layouts/error.vue

@@ -1,10 +1,11 @@
 <template>
   <v-app>
     <center>
-    
+
       <v-icon size="100">mdi-alert-circle</v-icon>
       <h1 class="grey--text">An error occured!</h1>
       <v-btn to="/">Reload Application</v-btn>
+      <v-btn to="/logs">Show Logs</v-btn>
 
 
       <div style="margin-top: 5em; color: #999; font-size: 0.75em;">
@@ -12,7 +13,7 @@
         <div>Code: {{ error.statusCode }}</div>
         <div>Path: {{ this.$route.fullPath }}</div>
       </div>
-    
+
     </center>
   </v-app>
 </template>

NUXT/pages/search.vue

@@ -1,5 +1,14 @@
 <template>
   <div>
+
+    <center style="padding-top: 3em;" v-if="videos == null">
+      <v-progress-circular
+        size="50"
+        indeterminate
+        color="primary"
+      />
+    </center>
+
     <v-list-item v-for="(video, index) in videos" :key="index">
       <v-card class="entry">
         <v-card-title v-text="video.raw.compactVideoRenderer.title.runs[0].text" />
@@ -25,14 +34,14 @@
 export default {
   data() {
     return {
-      videos: []
+      videos: null
     }
   },
   mounted() {
     const searchQuestion = this.$route.query.q
-
     const vm = this;
     this.$youtube.search(searchQuestion, (data) => {
+      console.log(data)
       vm.videos = data;
     })
   }