Added loading for liked songs

ShivaBhattacharjee · Aug 3, 2023 · 84e303c · 84e303c
1 parent d034d4d
commit 84e303c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/Context/LikedSongsContext.jsx b/src/Context/LikedSongsContext.jsx
@@ -10,6 +10,7 @@ export const useLikedSongs = () => {
 
 export const LikedSongsProvider = ({ children }) => {
   const [likedSongs, setLikedSongs] = useState([]);
+  const [loading , setLoading] = useState(true)
   const [error, setError] = useState('');
   const { username } = useLoginContext();
 
@@ -20,6 +21,7 @@ export const LikedSongsProvider = ({ children }) => {
       const response = await BackEndService.get(`/liked-songs/${username}?page=1`);
       const data = response?.data;
       setLikedSongs(data?.songs);
+      setLoading(false)
       setError('');
     } catch (error) {
       console.error('Error fetching liked songs:', error);
@@ -62,7 +64,8 @@ export const LikedSongsProvider = ({ children }) => {
     likedSongs: likedSongs,
     error: error,
     addSongToLikedSongs: addSongToLikedSongs,
-    deleteLikedSong: deleteLikedSong, // Expose the deleteLikedSong function in the context
+    deleteLikedSong: deleteLikedSong,
+    loading : loading
   };
 
   return (

diff --git a/src/Page/LikedSongs.jsx b/src/Page/LikedSongs.jsx
@@ -22,8 +22,8 @@ const LikedSongs = () => {
       <div className={`lg:flex  ${loggedIn && likedSongs.length !== 0 ?"grid":"flex"} grid-cols-3 items-center gap-1 flex-wrap p-2`}>
         {loggedIn ? (
           loading ? (
-            <div className='text-2xl font-bold fixed inset-0 w-full h-full flex place-items-center justify-center bg-[#2d1b69] -z-20 max-md:pr-0 pr-32 md:translate-x-1/4 md:pr-48 lg:translate-x-0'>
-              <LoadingSpinner/>
+            <div>
+              <h1 className='text-center'>Loading</h1>
               </div>
           ) : error ? (
             <p>Error fetching liked songs: {error}</p>