use v-auto-animate small parts of the UI

src/components/RightSideBar/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="r-sidebar">
     <SearchInput />
-    <div class="r-content noscroll">
+    <div v-auto-animate class="r-content noscroll" >
       <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
         <DashBoard />
       </div>

src/components/RightSideBar/Queue.vue

@@ -7,7 +7,7 @@
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
   >
-    <div class="inner" v-bind="wrapperProps">
+    <div class="inner" v-bind="wrapperProps" >
       <TrackItem
         style="height: 64px"
         v-for="t in tracks"

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="artists-results">
+  <div class="artists-results" v-auto-animate>
     <div
+      v-auto-animate
       class="search-results-grid"
       v-if="album_grid == true && search.albums.value.length"
     >
       <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
     </div>
     <div
+      v-auto-animate
       class="search-results-grid"
       v-else-if="!album_grid && search.artists.value.length"
     >

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -16,7 +16,7 @@
       </Teleport>
     </div>
 
-    <div id="tab-content">
+    <div id="tab-content" v-auto-animate>
       <slot />
     </div>
   </div>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tracks-results" class="noscroll">
-    <div v-if="search.tracks.value.length">
+    <div v-if="search.tracks.value.length" v-auto-animate>
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.trackid"

src/components/RightSideBar/SearchInput.vue

@@ -2,6 +2,7 @@
   <div class="gsearch-input">
     <div id="ginner" tabindex="0" ref="inputRef">
       <button
+        v-auto-animate
         :title="
           tabs.current === tabs.tabs.search ? 'back to queue' : 'go to search'
         "