route v1

app/store/data.ts

@@ -10,59 +10,62 @@ export const useDataStore = defineStore('data', {
     boxes: [] as Box[], // Store your box data here
     artists: [] as Artist[], // Store artist data here
     tracks: [] as Track[], // Store track data here
-    isLoaded: false // Remember if data is already loaded
+    isLoaded: false, // Remember if data is already loaded
+    isLoading: true
   }),
 
   actions: {
     async loadData() {
       if (this.isLoaded) return
+      this.isLoading = true
+      try {
+        this.boxes = await $fetch<Box[]>('/api/boxes')
+        this.artists = await $fetch<Artist[]>('/api/artists')
+        const compilationTracks = await $fetch<Track[]>('/api/tracks/compilation')
+        const playlistTracks = await $fetch<Track[]>('/api/tracks/playlist')
 
-      this.boxes = await $fetch<Box[]>('/api/boxes')
-      this.artists = await $fetch<Artist[]>('/api/artists')
-      const compilationTracks = await $fetch<Track[]>('/api/tracks/compilation')
-      const playlistTracks = await $fetch<Track[]>('/api/tracks/playlist')
+        // Mapper les tracks pour remplacer l'artist avec un objet Artist cohérent
+        const artistMap = new Map(this.artists.map((a) => [a.id, a]))
+        const allTracks = [...(compilationTracks ?? []), ...(playlistTracks ?? [])]
 
-      // Mapper les tracks pour remplacer l'artist avec un objet Artist cohérent
-      const artistMap = new Map(this.artists.map((a) => [a.id, a]))
-      const allTracks = [...(compilationTracks ?? []), ...(playlistTracks ?? [])]
+        this.tracks = allTracks.map((track) => {
+          const a = track.artist as unknown
+          let artistObj: Artist
+          if (typeof a === 'number') {
+            artistObj = artistMap.get(a) ?? { id: a, name: String(a), url: '', coverId: '' }
+          } else if (typeof a === 'string') {
+            artistObj = { id: 0, name: a, url: '', coverId: '' }
+          } else if (a && typeof a === 'object' && 'id' in (a as any)) {
+            const idVal = (a as any).id as number | undefined
+            artistObj = idVal != null ? artistMap.get(idVal) ?? (a as Artist) : (a as Artist)
+          } else {
+            artistObj = { id: 0, name: '', url: '', coverId: '' }
+          }
 
-      this.tracks = allTracks.map((track) => {
-        const a = track.artist as unknown
-        let artistObj: Artist
-        if (typeof a === 'number') {
-          artistObj = artistMap.get(a) ?? { id: a, name: String(a), url: '', coverId: '' }
-        } else if (typeof a === 'string') {
-          artistObj = { id: 0, name: a, url: '', coverId: '' }
-        } else if (a && typeof a === 'object' && 'id' in (a as any)) {
-          const idVal = (a as any).id as number | undefined
-          artistObj = idVal != null ? artistMap.get(idVal) ?? (a as Artist) : (a as Artist)
-        } else {
-          artistObj = { id: 0, name: '', url: '', coverId: '' }
+          return {
+            ...track,
+            artist: artistObj
+          }
+        })
+        const favBox: Box = {
+          id: FAVORITES_BOX_ID,
+          type: 'playlist',
+          name: 'Favoris',
+          duration: 0,
+          tracks: [],
+          description: '',
+          color1: '#0f172a',
+          color2: '#1e293b',
+          color3: '#334155',
+          state: 'box-list'
         }
-
-        return {
-          ...track,
-          artist: artistObj
+        if (!this.boxes.find((b) => b.id === FAVORITES_BOX_ID)) {
+          this.boxes = [favBox, ...this.boxes]
         }
-      })
-      const favBox: Box = {
-        id: FAVORITES_BOX_ID,
-        type: 'playlist',
-        name: 'Favoris',
-        duration: 0,
-        tracks: [],
-        description: '',
-        color1: '#0f172a',
-        color2: '#1e293b',
-        color3: '#334155',
-        state: 'box-list'
+        this.isLoaded = true
+      } finally {
+        this.isLoading = false
       }
-      if (!this.boxes.find((b) => b.id === FAVORITES_BOX_ID)) {
-        this.boxes = [favBox, ...this.boxes]
-      }
-      this.isLoaded = true
-      const uiStore = useUiStore()
-      uiStore.closeBox()
     }
   },