add loader

src/components/FolderView/SearchBox.vue

@@ -2,20 +2,21 @@
   <div class="folder-top flex">
     <div class="fname">
       <div>
-        <div class="ellip">{{ path.split('/').splice(-1) + "" }}</div>
+        <div class="ellip">{{ path.split("/").splice(-1) + "" }}</div>
       </div>
     </div>
     <div class="fsearch">
       <div>
         <input type="search" placeholder="Search this directory" />
       </div>
+      <div v-if="loading" class="loader"></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["path"]
+  props: ["path", "loading"],
 };
 </script>
 
@@ -35,8 +36,31 @@ export default {
 }
 
 .folder-top .fsearch {
+  position: relative;
   width: 50%;
-  margin-right: 1rem;
+  padding-right: 3rem;
+
+  .loader {
+    position: absolute;
+    top: $small;
+    right: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: solid;
+    border-top: solid rgb(255, 174, 0);
+    border-left: solid rgb(255, 174, 0);
+    animation: spin .2s linear infinite;
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
 }
 
 .folder-top .fsearch div {

src/views/FolderView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox :path="path" />
+      <SearchBox :path="path" :loading="loading" />
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -33,14 +33,15 @@ export default {
 
     const songs = ref([]);
     const folders = ref([]);
+    const last_page = ref([]);
+    const last_song_id = ref(null);
 
     const scrollable = ref(null);
-
-    const last_song_id = ref(null);
-    const last_page = ref([]);
+    const loading = ref(false);
 
     onMounted(() => {
       const getPathFolders = (path, last_id) => {
+        loading.value = true;
         getData(path, last_id).then((data) => {
           scrollable.value.scrollTop = 0;
 
@@ -52,6 +53,7 @@ export default {
           }
 
           folders.value = data.folders.value;
+          loading.value = false;
         });
       };
 
@@ -59,7 +61,7 @@ export default {
 
       watch(route, (new_route) => {
         path.value = new_route.params.path;
-          getPathFolders(path.value);
+        getPathFolders(path.value);
       });
 
       scrollable.value.onscroll = () => {
@@ -70,9 +72,12 @@ export default {
         let offset = height - scrollY;
 
         if (offset == 0 || offset == 1) {
+          loading.value = true;
           getData(path.value, last_song_id.value).then((data) => {
             songs.value = songs.value.concat(data.songs.value);
 
+            loading.value = false;
+
             if (songs.value.length) {
               last_song_id.value = songs.value.slice(-1)[0]._id.$oid;
             }
@@ -86,6 +91,7 @@ export default {
       folders,
       path,
       scrollable,
+      loading,
     };
   },
 };
@@ -111,6 +117,7 @@ export default {
 #scrollable {
   overflow-y: scroll;
   height: 100%;
+  margin-top: $small;
 
   &::-webkit-scrollbar {
     display: none;