fix(front): get widget data ready when components are loaded and refresh them on change

front/src/components/audio/track/Widget.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Track, Listening } from '~/types'
 
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, onMounted } from 'vue'
 import { useStore } from '~/store'
 import { clone } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -53,6 +53,7 @@ const count = ref(0)
 const nextPage = ref<string | null>(null)
 
 const isLoading = ref(false)
+
 const fetchData = async (url = props.url) => {
   isLoading.value = true
 
@@ -70,14 +71,18 @@ const fetchData = async (url = props.url) => {
       ? response.data.results.map((track: Track) => ({ track }))
       : response.data.results
 
-    objects.push(...newObjects)
+    objects.splice(0, objects.length, ...newObjects)
   } catch (error) {
     useErrorHandler(error as Error)
+  } finally {
+    isLoading.value = false
   }
-
-  isLoading.value = false
 }
 
+onMounted(() => {
+  fetchData()
+})
+
 watch(
   () => store.state.moderation.lastUpdate,
   () => fetchData(),
@@ -104,7 +109,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       console.log('Updated cover URL:', coverUrl.value);
     });
   }
-});
+}, { immediate: true });
 </script>
 
 <template>
@@ -119,7 +124,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     </h2>
     <Spacer :size="8" />
     <Alert
-      v-if="count === 0"
+      v-if="!isLoading && count === 0"
       blue
       align-items="center"
     >
@@ -127,7 +132,6 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         <i class="bi bi-search" />
         {{ t('components.audio.track.Widget.empty.noResults') }}
       </h4>
-      <Loader v-if="isLoading" />
     </Alert>
     <Section
       v-if="count > 0"

front/src/components/federation/LibraryWidget.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Library } from '~/types'
 
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
@@ -38,7 +38,7 @@ const fetchData = async (url = props.url) => {
   try {
     const response = await axios.get(url, {
       params: {
-        page_size: 6
+        page_size: 3
       }
     })
 
@@ -52,7 +52,13 @@ const fetchData = async (url = props.url) => {
   isLoading.value = false
 }
 
-fetchData()
+onMounted(() => {
+  fetchData()
+})
+
+watch(() => props.url, () => {
+  fetchData()
+})
 </script>
 
 <template>