Fixed initial load bug

app/components/Album/Slider.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-const { data, pending, refresh } = useAsyncData("random-albums", async () => {
+const { data: genresData } = await useApiFetch<Genre[]>("/genres/random")
-	const { data: genres } = await cfetch("/genres/random")
 
-	const results = await Promise.allSettled(
+const data = await Promise.allSettled(
-		genres.map(async (genre: Genre) => {
+	(genresData.value ?? []).map(async (genre: Genre) => {
 		const res = await cfetch(`/genres/albums/${genre._id}`)
 
 		return {
@@ -11,9 +10,8 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 			albums: res.data,
 		}
 	}),
-	)
+).then((results) =>
-
+	results
-	return results
 		.filter(
 			(
 				r,
@@ -22,8 +20,8 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 				albums: any[]
 			}> => r.status === "fulfilled",
 		)
-		.map((r) => r.value)
+		.map((r) => r.value),
-})
+)
 </script>
 
 <template>