global search loading state, fixes #463

NUXT/components/topNavigation.vue

@@ -52,6 +52,7 @@
       v-if="$route.name !== 'settings' && !$route.path.includes('/mods')"
       icon
       tile
+      :loading="$store.state.search.loading"
       class="ml-3 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       @click="$emit('search-btn', text)"

NUXT/layouts/default.vue

@@ -199,6 +199,7 @@ export default {
 
       if (this.search === true) {
         if (query) {
+          this.$store.commit("search/setLoading", true);
           this.$router.push(`/search?q=${query}`);
           this.search = false;
         }

NUXT/pages/search.vue

@@ -6,20 +6,6 @@
   </div>
 </template>
 
-<style scoped>
-.entry {
-  width: 100%; /* Prevent Loading Weirdness */
-}
-.videoRuntimeFloat {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px;
-  padding: 0px 4px 0px 4px;
-}
-</style>
-
 <script>
 import sectionListRenderer from "~/components/ListRenderers/sectionListRenderer.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
@@ -52,9 +38,24 @@ export default {
     getSearch() {
       const searchQuestion = this.$route.query.q;
       this.$youtube.search(searchQuestion).then((response) => {
+        this.$store.commit("search/setLoading", false);
         this.renderer = response;
       });
     },
   },
 };
 </script>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+.videoRuntimeFloat {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  padding: 0px 4px 0px 4px;
+}
+</style>

NUXT/store/search/index.js

@@ -0,0 +1,8 @@
+export const state = () => ({
+  loading: false,
+});
+export const mutations = {
+  setLoading(state, payload) {
+    state.loading = payload;
+  },
+};