fix

r2hu1 · Aug 24, 2024 · 6b91f8e · 6b91f8e
1 parent 03b1c3f
commit 6b91f8e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/(player)/_components/Recomandation.jsx b/app/(player)/_components/Recomandation.jsx
@@ -8,12 +8,14 @@ import { useEffect, useState } from "react";
 
 export default function Recomandation({ id }) {
     const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+
     const getData = async () => {
         await getSongsSuggestions(id)
             .then(res => res.json())
             .then(data => {
                 setData(data.data);
-                console.log(data);
+                setLoading(false);
             });
     }
     useEffect(() => {
@@ -26,15 +28,16 @@ export default function Recomandation({ id }) {
                 <p className="text-xs text-muted-foreground">Related to your search</p>
             </div>
             <ScrollArea className="rounded-md mt-4">
-                {data.length > 0 ? (
+                {!loading && data && (
                     <div>
                         <div className="flex gap-3">
                             {data.map((song) => (
                                 <SongCard key={song.id} image={song.image[2].url} album={song.album.name} title={song.name} artist={song.artists.primary[0].name} id={song.id} />
                             ))}
                         </div>
                     </div>
-                ) : (
+                )}
+                {loading && (
                     <div className="flex gap-6">
                         <div className="grid gap-2">
                             <Skeleton className="h-[200px] w-[200px]" />
@@ -60,6 +63,11 @@ export default function Recomandation({ id }) {
                 )}
                 <ScrollBar orientation="horizontal" className="hidden" />
             </ScrollArea>
+            {!loading && !data && (
+                <div className="flex items-center justify-center text-center h-[100px]">
+                    <p className="text-sm text-muted-foreground">No recomandation for this song.</p>
+                </div>
+            )}
         </section>
     )
 }
diff --git a/app/(root)/saved/page.jsx b/app/(root)/saved/page.jsx
@@ -27,7 +27,7 @@ export default function Page() {
             <div>
                 <h1 className="text-base font-medium">Saved Songs</h1>
                 <p className="text-xs text-muted-foreground">All of your Saved songs.</p>
-                {!loading && data.length >= 0 && (
+                {!loading && data.length > 0 && (
                     <ScrollArea className="rounded-md mt-4">
                         <div className="flex gap-3">
                             {data.map((song) => (