move loader to search bar

src/views/AlbumView.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="al-view rounded">
     <div class="header">
-      <Header :album_info="album_info"/>
+      <Header :album_info="album_info" />
     </div>
     <div class="separator" id="av-sep"></div>
     <div>
-      <SongList :songs="album_songs"/>
+      <SongList :songs="album_songs" />
     </div>
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists />
@@ -28,6 +28,7 @@ import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 import getAlbum from "../composables/getAlbum.js";
+import state from "@/composables/state.js";
 
 export default {
   components: {
@@ -45,9 +46,11 @@ export default {
     const album_info = ref({});
 
     onMounted(() => {
+      state.loading.value = true;
       getAlbum(album_name, album_artists).then((data) => {
         album_songs.value = data.songs;
         album_info.value = data.info;
+        state.loading.value = false;
       });
     });
 

src/views/FolderView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox :path="path" :loading="loading" />
+      <SearchBox :path="path"/>
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -20,7 +20,7 @@ import SearchBox from "@/components/FolderView/SearchBox.vue";
 
 import getData from "../composables/getFiles.js";
 import { onMounted, watch } from "@vue/runtime-core";
-import perks from "@/composables/perks.js";
+import state from "@/composables/state.js";
 
 export default {
   components: {
@@ -36,36 +36,39 @@ export default {
     const folders = ref([]);
 
     const scrollable = ref(null);
-    const loading = ref(false);
+
+    function focusSearch() {
+      console.log("focusSearch");
+    }
 
     onMounted(() => {
       const getPathFolders = (path, last_id) => {
-        loading.value = true;
+        state.loading.value = true;
         getData(path, last_id).then((data) => {
           scrollable.value.scrollTop = 0;
 
           songs.value = data.songs;
           folders.value = data.folders;
-          
-          loading.value = false;
+
+          state.loading.value = false;
         });
       };
 
       getPathFolders(path.value);
 
       watch(route, (new_route) => {
-        perks.search.value = "";
+        state.search_query.value = "";
         path.value = new_route.params.path;
         getPathFolders(path.value);
       });
     });
 
     return {
+      focusSearch,
       songs,
       folders,
       path,
       scrollable,
-      loading,
     };
   },
 };