From e91a218a8cb923d8fcb2088c46dc80c792fe23b4 Mon Sep 17 00:00:00 2001
From: KRTirtho <krtirtho@gmail.com>
Date: Fri, 19 Mar 2021 15:44:41 +0600
Subject: [PATCH] Added: SearchResult comp enhanced, Error, loading, retry
 handler comp,  pagination

---
 .vscode/settings.json                         |   3 +
 assets/loading-spinner.gif                    | Bin 0 -> 19705 bytes
 src/app.tsx                                   |   1 -
 src/components/CurrentPlaylist.tsx            |  22 ++-
 src/components/Home.tsx                       | 128 +-----------------
 src/components/Library.tsx                    |  83 +++++++++---
 src/components/Player.tsx                     |   2 +
 src/components/PlayerProgressBar.tsx          |   4 +-
 src/components/PlaylistGenreView.tsx          |  13 +-
 src/components/PlaylistView.tsx               | 109 ++-------------
 src/components/Search.tsx                     |  37 +++--
 .../SearchResultPlaylistCollection.tsx        |  19 +--
 .../SearchResultSongsCollection.tsx           |  58 ++++++++
 src/components/shared/ErrorApplet.tsx         |  24 ----
 src/components/shared/PlaceholderApplet.tsx   |  56 ++++++++
 src/components/shared/PlaylistCard.tsx        | 123 +++++++++++++++++
 src/components/shared/TrackButton.tsx         |  85 ++++++++++++
 src/conf.ts                                   |   3 +-
 src/hooks/useTrackReaction.ts                 |   9 +-
 src/icons.ts                                  |   4 +-
 src/routes.tsx                                |   4 +
 21 files changed, 487 insertions(+), 300 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 assets/loading-spinner.gif
 create mode 100644 src/components/SearchResultSongsCollection.tsx
 delete mode 100644 src/components/shared/ErrorApplet.tsx
 create mode 100644 src/components/shared/PlaceholderApplet.tsx
 create mode 100644 src/components/shared/PlaylistCard.tsx
 create mode 100644 src/components/shared/TrackButton.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..3662b370
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file
diff --git a/assets/loading-spinner.gif b/assets/loading-spinner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fb9c052f6b5104e8f99448080e98fcd2fc7195a5
GIT binary patch
literal 19705
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
E2mL!rf&c&j

literal 0
HcmV?d00001

diff --git a/src/app.tsx b/src/app.tsx
index 83a3bb99..cff361e4 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -53,7 +53,6 @@ function RootApp() {
           if (nativeEv) {
             const event = new QKeyEvent(nativeEv);
             const eventKey = event.key();
-            console.log("eventKey:", eventKey);
             if (audioPlayer.isRunning() && currentTrack)
               switch (eventKey) {
                 case 32: //space
diff --git a/src/components/CurrentPlaylist.tsx b/src/components/CurrentPlaylist.tsx
index c16c4466..92dd5438 100644
--- a/src/components/CurrentPlaylist.tsx
+++ b/src/components/CurrentPlaylist.tsx
@@ -1,15 +1,22 @@
 import { ScrollArea, Text, View } from "@nodegui/react-nodegui";
 import React, { useContext } from "react";
 import playerContext from "../context/playerContext";
-import { TrackButton, TrackTableIndex } from "./PlaylistView";
+import { TrackTableIndex } from "./PlaylistView";
+import { TrackButton } from "./shared/TrackButton";
 
 function CurrentPlaylist() {
-  const { currentPlaylist, currentTrack, setCurrentTrack } = useContext(playerContext);
+  const { currentPlaylist, currentTrack } = useContext(playerContext);
 
   if (!currentPlaylist && !currentTrack) {
     return <Text style="flex: 1;">{`<center>There is nothing being played now</center>`}</Text>;
   }
 
+  if (currentTrack && !currentPlaylist) {
+    <View style="flex: 1;">
+      <TrackButton track={currentTrack} index={0}/>
+    </View>
+  }
+
   return (
     <View style="flex: 1; flex-direction: 'column';">
       <Text>{`<center><h2>${currentPlaylist?.name}</h2></center>`}</Text>
@@ -17,16 +24,7 @@ function CurrentPlaylist() {
       <ScrollArea style={`flex:1; flex-grow: 1; border: none;`}>
         <View style={`flex-direction:column; flex: 1;`}>
           {currentPlaylist?.tracks.map(({ track }, index) => {
-            return (
-              <TrackButton
-                key={index + track.id}
-                active={currentTrack?.id === track.id}
-                track={track}
-                index={index}
-                on={{ MouseButtonRelease: () => setCurrentTrack(track) }}
-                onTrackClick={() => {}}
-              />
-            );
+            return <TrackButton key={index + track.id} track={track} index={index} />;
           })}
         </View>
       </ScrollArea>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 359aea05..85f9ecc1 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,21 +1,14 @@
-import React, { useContext, useMemo, useState } from "react";
-import { Button, ScrollArea, View, Text } from "@nodegui/react-nodegui";
+import React from "react";
+import { Button, ScrollArea, View } from "@nodegui/react-nodegui";
 import { useHistory } from "react-router";
-import CachedImage from "./shared/CachedImage";
-import { CursorShape, QIcon, QMouseEvent } from "@nodegui/nodegui";
+import { CursorShape, QMouseEvent } from "@nodegui/nodegui";
 import { QueryCacheKeys } from "../conf";
 import useSpotifyQuery from "../hooks/useSpotifyQuery";
-import ErrorApplet from "./shared/ErrorApplet";
-import IconButton from "./shared/IconButton";
-import { heart, heartRegular, pause, play } from "../icons";
-import playerContext from "../context/playerContext";
-import { audioPlayer } from "./Player";
-import showError from "../helpers/showError";
-import { generateRandomColor, getDarkenForeground } from "../helpers/RandomColor";
-import usePlaylistReaction from "../hooks/usePlaylistReaction";
+import PlaceholderApplet from "./shared/PlaceholderApplet";
+import PlaylistCard from "./shared/PlaylistCard";
 
 function Home() {
-  const { data: categories, isError, isRefetchError, refetch } = useSpotifyQuery<SpotifyApi.CategoryObject[]>(
+  const { data: categories, isError, refetch, isLoading } = useSpotifyQuery<SpotifyApi.CategoryObject[]>(
     QueryCacheKeys.categories,
     (spotifyApi) => spotifyApi.getCategories({ country: "US" }).then((categoriesReceived) => categoriesReceived.body.categories.items),
     { initialData: [] }
@@ -24,7 +17,7 @@ function Home() {
   return (
     <ScrollArea style={`flex-grow: 1; border: none; flex: 1;`}>
       <View style={`flex-direction: 'column'; justify-content: 'center'; flex: 1;`}>
-        {(isError || isRefetchError) && <ErrorApplet message="Failed to query genres" reload={refetch} helps />}
+        <PlaceholderApplet error={isError} message="Failed to query genres" reload={refetch} helps loading={isLoading} />
         {categories?.map((category, index) => {
           return <CategoryCard key={index + category.id} id={category.id} name={category.name} />;
         })}
@@ -95,110 +88,3 @@ const CategoryCard = ({ id, name }: CategoryCardProps) => {
     </View>
   );
 };
-
-interface PlaylistCardProps {
-  playlist: SpotifyApi.PlaylistObjectSimplified;
-}
-
-export const PlaylistCard = React.memo(({ playlist }: PlaylistCardProps) => {
-  const { id, description, name, images } = playlist;
-  const history = useHistory();
-  const [hovered, setHovered] = useState(false);
-  const { setCurrentTrack, currentPlaylist, setCurrentPlaylist } = useContext(playerContext);
-  const { refetch } = useSpotifyQuery<SpotifyApi.PlaylistTrackObject[]>([QueryCacheKeys.playlistTracks, id], (spotifyApi) => spotifyApi.getPlaylistTracks(id).then((track) => track.body.items), {
-    initialData: [],
-    enabled: false,
-  });
-  const { reactToPlaylist, isFavorite } = usePlaylistReaction();
-
-  const handlePlaylistPlayPause = async () => {
-    try {
-      const { data: tracks, isSuccess } = await refetch();
-      if (currentPlaylist?.id !== id && isSuccess && tracks) {
-        setCurrentPlaylist({ tracks, id, name, thumbnail: images[0].url });
-        setCurrentTrack(tracks[0].track);
-      } else {
-        await audioPlayer.stop();
-        setCurrentTrack(undefined);
-        setCurrentPlaylist(undefined);
-      }
-    } catch (error) {
-      showError(error, "[Failed adding playlist to queue]: ");
-    }
-  };
-
-  function gotoPlaylist(native?: any) {
-    const key = new QMouseEvent(native);
-    if (key.button() === 1) {
-      history.push(`/playlist/${id}`, { name, thumbnail: images[0].url });
-    }
-  }
-
-  const bgColor1 = useMemo(() => generateRandomColor(), []);
-  const color = useMemo(() => getDarkenForeground(bgColor1), [bgColor1]);
-
-  const playlistStyleSheet = `
-    #playlist-container{
-      width: 150px;
-      flex-direction: column;
-      padding: 5px;
-      min-height: 150px;
-      background-color: ${bgColor1};
-      border-radius: 5px;
-    }
-    #playlist-container:hover{
-      border: 1px solid green;
-    }
-    #playlist-container:clicked{
-      border: 5px solid green;
-    }
-  `;
-
-  return (
-    <View
-      id="playlist-container"
-      cursor={CursorShape.PointingHandCursor}
-      styleSheet={playlistStyleSheet}
-      on={{
-        MouseButtonRelease: gotoPlaylist,
-        HoverEnter() {
-          setHovered(true);
-        },
-        HoverLeave() {
-          setHovered(false);
-        },
-      }}>
-      {/* <CachedImage src={thumbnail} maxSize={{ height: 150, width: 150 }} scaledContents alt={name} /> */}
-      <Text style={`color: ${color};`} wordWrap on={{ MouseButtonRelease: gotoPlaylist }}>
-        {`
-          <center>
-            <h3>${name}</h3>
-            <p>${description}</p>
-          </center>
-        `}
-      </Text>
-      {(hovered || currentPlaylist?.id === id) && (
-        <>
-          <IconButton
-            style={`position: absolute; bottom: 30px; left: '55%'; background-color: ${color};`}
-            icon={new QIcon(isFavorite(id) ? heart : heartRegular)}
-            on={{
-              clicked() {
-                reactToPlaylist(playlist);
-              },
-            }}
-          />
-          <IconButton
-            icon={new QIcon(currentPlaylist?.id === id ? pause : play)}
-            style={`position: absolute; bottom: 30px; left: '80%'; background-color: ${color};`}
-            on={{
-              clicked() {
-                handlePlaylistPlayPause();
-              },
-            }}
-          />
-        </>
-      )}
-    </View>
-  );
-});
diff --git a/src/components/Library.tsx b/src/components/Library.tsx
index fcf5fe3e..cce426fd 100644
--- a/src/components/Library.tsx
+++ b/src/components/Library.tsx
@@ -1,11 +1,14 @@
-import { ScrollArea, View } from "@nodegui/react-nodegui";
+import { Button, ScrollArea, View } from "@nodegui/react-nodegui";
 import React, { useContext } from "react";
 import { Redirect, Route } from "react-router";
 import { QueryCacheKeys } from "../conf";
 import playerContext from "../context/playerContext";
+import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
 import useSpotifyQuery from "../hooks/useSpotifyQuery";
-import { PlaylistCard } from "./Home";
-import { PlaylistSimpleControls, TrackButton, TrackTableIndex } from "./PlaylistView";
+import { PlaylistSimpleControls, TrackTableIndex } from "./PlaylistView";
+import PlaceholderApplet from "./shared/PlaceholderApplet";
+import PlaylistCard from "./shared/PlaylistCard";
+import { TrackButton } from "./shared/TrackButton";
 import { TabMenuItem } from "./TabMenu";
 
 function Library() {
@@ -38,6 +41,7 @@ function UserPlaylists() {
   return (
     <ScrollArea style="flex: 1; border: none;">
       <View style="flex: 1; flex-direction: 'row'; flex-wrap: 'wrap'; justify-content: 'space-evenly'; width: 330px; align-items: 'center';">
+        <PlaceholderApplet error={isError} loading={isLoading} message="Failed querying spotify" reload={refetch} />
         {userPlaylists?.map((playlist, index) => (
           <PlaylistCard key={index + playlist.id} playlist={playlist} />
         ))}
@@ -48,10 +52,23 @@ function UserPlaylists() {
 
 function UserSavedTracks() {
   const userSavedPlaylistId = "user-saved-tracks";
-  const { data: userTracks, isError, isLoading } = useSpotifyQuery<SpotifyApi.SavedTrackObject[]>(QueryCacheKeys.userSavedTracks, (spotifyApi) =>
-    spotifyApi.getMySavedTracks({ limit: 50 }).then((tracks) => tracks.body.items)
+  const { data: userSavedTracks, fetchNextPage, hasNextPage, isFetchingNextPage, isError, isLoading, refetch } = useSpotifyInfiniteQuery<SpotifyApi.UsersSavedTracksResponse>(
+    QueryCacheKeys.userSavedTracks,
+    (spotifyApi, { pageParam }) => spotifyApi.getMySavedTracks({ limit: 50, offset: pageParam }).then((res) => res.body),
+    {
+      getNextPageParam(lastPage) {
+        if (lastPage.next) {
+          return lastPage.offset + lastPage.limit;
+        }
+      },
+    }
   );
-  const { currentPlaylist, setCurrentPlaylist, setCurrentTrack, currentTrack } = useContext(playerContext);
+  const { currentPlaylist, setCurrentPlaylist, setCurrentTrack } = useContext(playerContext);
+
+  const userTracks = userSavedTracks?.pages
+    ?.map((page) => page.items)
+    .filter(Boolean)
+    .flat(1) as SpotifyApi.SavedTrackObject[] | undefined;
 
   function handlePlaylistPlayPause(index?: number) {
     if (currentPlaylist?.id !== userSavedPlaylistId && userTracks) {
@@ -63,26 +80,58 @@ function UserSavedTracks() {
     }
   }
 
+  const playlist: SpotifyApi.PlaylistObjectFull = {
+    collaborative: false,
+    description: "User Playlist",
+    tracks: {
+      items: [userTracks ?? []].map(
+        (userTrack) =>
+          (({
+            ...userTrack,
+            added_by: "Me",
+            is_local: false,
+            added_at: Date.now(),
+          } as unknown) as SpotifyApi.PlaylistTrackObject)
+      ),
+      limit: 20,
+      href: "",
+      next: "",
+      offset: 0,
+      previous: "",
+      total: 20,
+    },
+    external_urls: { spotify: "" },
+    followers: { href: null, total: 2 },
+    href: "",
+    id: userSavedPlaylistId,
+    images: [],
+    name: "User saved track",
+    owner: { external_urls: { spotify: "" }, href: "", id: "Me", type: "user", uri: "spotify:user:me", display_name: "User", followers: { href: null, total: 0 } },
+    public: false,
+    snapshot_id: userSavedPlaylistId + "snapshot",
+    type: "playlist",
+    uri: "spotify:user:me:saved-tracks",
+  };
   return (
     <View style="flex: 1; flex-direction: 'column';">
       <PlaylistSimpleControls handlePlaylistPlayPause={handlePlaylistPlayPause} isActive={currentPlaylist?.id === userSavedPlaylistId} />
-      <TrackTableIndex/>
+      <TrackTableIndex />
       <ScrollArea style="flex: 1; border: none;">
         <View style="flex: 1; flex-direction: 'column'; align-items: 'stretch';">
-          {userTracks?.map(({ track }, index) => (
-            <TrackButton
-              key={index+track.id}
-              active={currentPlaylist?.id === userSavedPlaylistId && currentTrack?.id === track.id}
-              track={track}
-              index={index}
+          <PlaceholderApplet error={isError} loading={isLoading || isFetchingNextPage} message="Failed querying spotify" reload={refetch} />
+          {userTracks?.map(({ track }, index) => track && <TrackButton key={index + track.id} track={track} index={index} playlist={playlist} />)}
+          {hasNextPage && (
+            <Button
+              style="flex-grow: 0; align-self: 'center';"
+              text="Load more"
               on={{
-                MouseButtonRelease() {
-                  setCurrentTrack(track);
+                clicked() {
+                  fetchNextPage();
                 },
               }}
-              onTrackClick={()=>handlePlaylistPlayPause(index)}
+              enabled={!isFetchingNextPage}
             />
-          ))}
+          )}
         </View>
       </ScrollArea>
     </View>
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 9f83c1da..3d3dc229 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -174,6 +174,8 @@ function Player(): ReactElement {
   async function stopPlayback() {
     try {
       if (playerRunning) {
+        setCurrentTrack(undefined);
+        setCurrentPlaylist(undefined);
         await audioPlayer.stop();
       }
     } catch (error) {
diff --git a/src/components/PlayerProgressBar.tsx b/src/components/PlayerProgressBar.tsx
index 618a027d..261d0d68 100644
--- a/src/components/PlayerProgressBar.tsx
+++ b/src/components/PlayerProgressBar.tsx
@@ -1,6 +1,5 @@
 import { Direction, Orientation, QAbstractSliderSignals } from "@nodegui/nodegui";
-import { BoxView, Slider, Text, useEventHandler, View } from "@nodegui/react-nodegui";
-import { WidgetEventListeners } from "@nodegui/react-nodegui/dist/components/View/RNView";
+import { BoxView, Slider, Text, useEventHandler } from "@nodegui/react-nodegui";
 import NodeMpv from "node-mpv";
 import React, { useContext, useEffect, useState } from "react";
 import playerContext from "../context/playerContext";
@@ -36,7 +35,6 @@ function PlayerProgressBar({ audioPlayer, totalDuration }: PlayerProgressBarProp
 
   useEffect(() => {
     const progressListener = (seconds: number) => {
-      console.log("seconds", seconds);
       setTrackTime(seconds);
     };
     const statusListener = ({ property }: import("node-mpv").StatusObject): void => {
diff --git a/src/components/PlaylistGenreView.tsx b/src/components/PlaylistGenreView.tsx
index 91471df2..f26f041d 100644
--- a/src/components/PlaylistGenreView.tsx
+++ b/src/components/PlaylistGenreView.tsx
@@ -5,18 +5,19 @@ import { useLocation, useParams } from "react-router";
 import { QueryCacheKeys } from "../conf";
 import useSpotifyQuery from "../hooks/useSpotifyQuery";
 import BackButton from "./BackButton";
-import { PlaylistCard } from "./Home";
+import PlaceholderApplet from "./shared/PlaceholderApplet";
+import PlaylistCard from "./shared/PlaylistCard";
 
 function PlaylistGenreView() {
   const { id } = useParams<{ id: string }>();
   const location = useLocation<{ name: string }>();
-  const { data: playlists } = useSpotifyQuery<SpotifyApi.PlaylistObjectSimplified[]>(
+  const { data: playlists, isError, isLoading, refetch } = useSpotifyQuery<SpotifyApi.PlaylistObjectSimplified[]>(
     [QueryCacheKeys.genrePlaylists, id],
     (spotifyApi) => spotifyApi.getPlaylistsForCategory(id).then((playlistsRes) => playlistsRes.body.playlists.items),
     { initialData: [] }
   );
 
-  return <GenreView heading={location.state.name} playlists={playlists ?? []} />;
+  return <GenreView isError={isError} isLoading={isLoading} refetch={refetch} heading={location.state.name} playlists={playlists ?? []} />;
 }
 
 export default PlaylistGenreView;
@@ -26,9 +27,12 @@ interface GenreViewProps {
   playlists: SpotifyApi.PlaylistObjectSimplified[];
   loadMore?: QAbstractButtonSignals["clicked"];
   isLoadable?: boolean;
+  isError: boolean;
+  isLoading: boolean;
+  refetch: Function;
 }
 
-export function GenreView({ heading, playlists, loadMore, isLoadable }: GenreViewProps) {
+export function GenreView({ heading, playlists, loadMore, isLoadable, isError, isLoading, refetch }: GenreViewProps) {
   const playlistGenreViewStylesheet = `
     #genre-container{
       flex-direction: column;
@@ -56,6 +60,7 @@ export function GenreView({ heading, playlists, loadMore, isLoadable }: GenreVie
       <Text id="heading">{`<h2>${heading}</h2>`}</Text>
       <ScrollArea id="scroll-view">
         <View id="child-container">
+          <PlaceholderApplet error={isError} loading={isLoading} reload={refetch} message={`Failed loading ${heading}'s playlists`} />
           {playlists?.map((playlist, index) => {
             return <PlaylistCard key={index + playlist.id} playlist={playlist} />;
           })}
diff --git a/src/components/PlaylistView.tsx b/src/components/PlaylistView.tsx
index 18fae849..a5714b1d 100644
--- a/src/components/PlaylistView.tsx
+++ b/src/components/PlaylistView.tsx
@@ -1,18 +1,17 @@
-import React, { FC, useContext, useMemo } from "react";
-import { View, Button, ScrollArea, Text } from "@nodegui/react-nodegui";
+import React, { FC, useContext } from "react";
+import { View, ScrollArea, Text } from "@nodegui/react-nodegui";
 import BackButton from "./BackButton";
 import { useLocation, useParams } from "react-router";
-import { QAbstractButtonSignals, QIcon, QMouseEvent, QWidgetSignals } from "@nodegui/nodegui";
-import { WidgetEventListeners } from "@nodegui/react-nodegui/dist/components/View/RNView";
+import { QIcon } from "@nodegui/nodegui";
 import playerContext from "../context/playerContext";
 import IconButton from "./shared/IconButton";
-import { heart, heartRegular, pause, play, stop } from "../icons";
+import { heart, heartRegular, play, stop } from "../icons";
 import { audioPlayer } from "./Player";
 import { QueryCacheKeys } from "../conf";
 import useSpotifyQuery from "../hooks/useSpotifyQuery";
-import useTrackReaction from "../hooks/useTrackReaction";
 import usePlaylistReaction from "../hooks/usePlaylistReaction";
-import { msToMinAndSec } from "../helpers/msToMin:sec";
+import { TrackButton } from "./shared/TrackButton";
+import PlaceholderApplet from "./shared/PlaceholderApplet";
 
 export interface PlaylistTrackRes {
   name: string;
@@ -21,7 +20,7 @@ export interface PlaylistTrackRes {
 }
 
 const PlaylistView: FC = () => {
-  const { setCurrentTrack, currentPlaylist, currentTrack, setCurrentPlaylist } = useContext(playerContext);
+  const { setCurrentTrack, currentPlaylist, setCurrentPlaylist } = useContext(playerContext);
   const params = useParams<{ id: string }>();
   const location = useLocation<{ name: string; thumbnail: string }>();
   const { isFavorite, reactToPlaylist } = usePlaylistReaction();
@@ -34,10 +33,10 @@ const PlaylistView: FC = () => {
     { initialData: [] }
   );
 
-  const handlePlaylistPlayPause = (index?: number) => {
+  const handlePlaylistPlayPause = () => {
     if (currentPlaylist?.id !== params.id && isSuccess && tracks) {
       setCurrentPlaylist({ ...params, ...location.state, tracks });
-      setCurrentTrack(tracks[index ?? 0].track);
+      setCurrentTrack(tracks[0].track);
     } else {
       audioPlayer.stop().catch((error) => console.error("Failed to stop audio player: ", error));
       setCurrentTrack(undefined);
@@ -45,10 +44,6 @@ const PlaylistView: FC = () => {
     }
   };
 
-  const trackClickHandler = (track: SpotifyApi.TrackObjectFull) => {
-    setCurrentTrack(track);
-  };
-
   return (
     <View style={`flex: 1; flex-direction: 'column';`}>
       <PlaylistSimpleControls
@@ -61,36 +56,10 @@ const PlaylistView: FC = () => {
       {<TrackTableIndex />}
       <ScrollArea style={`flex:1; flex-grow: 1; border: none;`}>
         <View style={`flex-direction:column; flex: 1;`}>
-          {isLoading && <Text>{`Loading Tracks...`}</Text>}
-          {isError && (
-            <>
-              <Text>{`Failed to load ${location.state.name} tracks`}</Text>
-              <Button
-                on={{
-                  clicked() {
-                    refetch();
-                  },
-                }}
-                text="Retry"
-              />
-            </>
-          )}
+          <PlaceholderApplet error={isError} loading={isLoading} reload={refetch} message={`Failed retrieving ${location.state.name} tracks`} />
           {tracks?.map(({ track }, index) => {
             if (track) {
-              return (
-                <TrackButton
-                  key={index + track.id}
-                  track={track}
-                  index={index}
-                  active={currentTrack?.id === track.id && currentPlaylist?.id === params.id}
-                  on={{
-                    MouseButtonRelease: () => trackClickHandler(track),
-                  }}
-                  onTrackClick={() => {
-                    handlePlaylistPlayPause(index);
-                  }}
-                />
-              );
+              return <TrackButton key={index + track.id} track={track} index={index} playlist={playlist} />;
             }
           })}
         </View>
@@ -99,62 +68,6 @@ const PlaylistView: FC = () => {
   );
 };
 
-export interface TrackButtonProps {
-  track: SpotifyApi.TrackObjectFull;
-  on: Partial<QWidgetSignals | WidgetEventListeners>;
-  onTrackClick?: QAbstractButtonSignals["clicked"];
-  active: boolean;
-  index: number;
-}
-
-export const TrackButton: FC<TrackButtonProps> = ({ track, active, index, on, onTrackClick }) => {
-  const { reactToTrack, isFavorite } = useTrackReaction();
-
-  const duration = useMemo(() => msToMinAndSec(track.duration_ms), []);
-  return (
-    <View
-      id={active ? "active" : "track-button"}
-      styleSheet={trackButtonStyle}
-      on={{
-        ...on,
-        MouseButtonRelease(native: any) {
-          if (new QMouseEvent(native).button() === 1) {
-            (on as WidgetEventListeners).MouseButtonRelease();
-          }
-        },
-      }}>
-      <Text style="padding: 5px;">{index + 1}</Text>
-      <View style="flex-direction: 'column'; width: '35%';">
-        <Text>{`<h3>${track.name}</h3>`}</Text>
-        <Text>{track.artists.map((artist) => artist.name).join(", ")}</Text>
-      </View>
-      <Text style="width: '25%';">{track.album.name}</Text>
-      <Text style="width: '15%';">{duration}</Text>
-      <View style="width: '15%'; padding: 5px; justify-content: 'space-around';">
-        <IconButton
-          icon={new QIcon(isFavorite(track.id) ? heart : heartRegular)}
-          on={{
-            clicked() {
-              reactToTrack({ track, added_at: "" });
-            },
-          }}
-        />
-        <IconButton icon={new QIcon(active ? pause : play)} on={{ clicked: onTrackClick }} />
-      </View>
-    </View>
-  );
-};
-
-const trackButtonStyle = `
-  #active{
-    background-color: #34eb71;
-    color: #333;
-  }
-  #track-button:hover, #active:hover{
-    background-color: rgba(229, 224, 224, 0.48);
-  }
-`;
-
 export default PlaylistView;
 
 export function TrackTableIndex() {
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index e4f94283..37b8cedc 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,4 +1,4 @@
-import { QIcon, QMouseEvent } from "@nodegui/nodegui";
+import { CursorShape, QIcon, QKeyEvent, QMouseEvent } from "@nodegui/nodegui";
 import { LineEdit, ScrollArea, Text, View } from "@nodegui/react-nodegui";
 import React, { useState } from "react";
 import { useHistory } from "react-router";
@@ -6,14 +6,16 @@ import { QueryCacheKeys } from "../conf";
 import showError from "../helpers/showError";
 import useSpotifyQuery from "../hooks/useSpotifyQuery";
 import { search } from "../icons";
-import { PlaylistCard } from "./Home";
-import { TrackButton, TrackTableIndex } from "./PlaylistView";
+import { TrackTableIndex } from "./PlaylistView";
 import IconButton from "./shared/IconButton";
+import PlaceholderApplet from "./shared/PlaceholderApplet";
+import PlaylistCard from "./shared/PlaylistCard";
+import { TrackButton } from "./shared/TrackButton";
 
 function Search() {
   const history = useHistory<{ searchQuery: string }>();
   const [searchQuery, setSearchQuery] = useState<string>("");
-  const { data: searchResults, isError, refetch } = useSpotifyQuery<SpotifyApi.SearchResponse>(
+  const { data: searchResults, refetch, isError, isLoading } = useSpotifyQuery<SpotifyApi.SearchResponse>(
     QueryCacheKeys.search,
     (spotifyApi) => spotifyApi.search(searchQuery, ["playlist", "track"], { limit: 4 }).then((res) => res.body),
     { enabled: false }
@@ -27,6 +29,7 @@ function Search() {
     }
   }
 
+  const placeholder = <PlaceholderApplet error={isError} loading={isLoading} message="Failed querying spotify" reload={refetch} />;
   return (
     <View style="flex: 1; flex-direction: 'column'; padding: 5px;">
       <View>
@@ -37,6 +40,13 @@ function Search() {
             textChanged(t) {
               setSearchQuery(t);
             },
+            KeyRelease(native: any) {
+              const key = new QKeyEvent(native);
+              const isEnter = key.key() === 16777220;
+              if (isEnter) {
+                handleSearch();
+              }
+            }
           }}
         />
         <IconButton enabled={searchQuery.length > 0} icon={new QIcon(search)} on={{ clicked: handleSearch }} />
@@ -44,24 +54,35 @@ function Search() {
       <ScrollArea style="flex: 1;">
         <View style="flex-direction: 'column'; flex: 1;">
           <View style="flex: 1; flex-direction: 'column';">
-            <Text>{`<h2>Songs</h2>`}</Text>
+            <Text
+              cursor={CursorShape.PointingHandCursor}
+              on={{
+                MouseButtonRelease(native: any) {
+                  if (new QMouseEvent(native).button() === 1 && searchResults?.tracks) {
+                    history.push("/search/songs", { searchQuery });
+                  }
+                },
+              }}>{`<h2>Songs</h2>`}</Text>
             <TrackTableIndex />
+            {placeholder}
             {searchResults?.tracks?.items.map((track, index) => (
-              <TrackButton key={index+track.id} active={false} index={index} track={track} on={{}} onTrackClick={() => {}} />
+              <TrackButton key={index + track.id} index={index} track={track} />
             ))}
           </View>
           <View style="flex: 1; flex-direction: 'column';">
             <Text
+              cursor={CursorShape.PointingHandCursor}
               on={{
                 MouseButtonRelease(native: any) {
-                  if (new QMouseEvent(native).button() === 1) {
+                  if (new QMouseEvent(native).button() === 1 && searchResults?.playlists) {
                     history.push("/search/playlists", { searchQuery });
                   }
                 },
               }}>{`<h2>Playlists</h2>`}</Text>
             <View style="flex: 1; justify-content: 'space-around'; align-items: 'center';">
+              {placeholder}
               {searchResults?.playlists?.items.map((playlist, index) => (
-                <PlaylistCard key={index+playlist.id} playlist={playlist} />
+                <PlaylistCard key={index + playlist.id} playlist={playlist} />
               ))}
             </View>
           </View>
diff --git a/src/components/SearchResultPlaylistCollection.tsx b/src/components/SearchResultPlaylistCollection.tsx
index 3335cd99..89521b03 100644
--- a/src/components/SearchResultPlaylistCollection.tsx
+++ b/src/components/SearchResultPlaylistCollection.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useLocation } from "react-router";
 import { QueryCacheKeys } from "../conf";
 import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
@@ -6,28 +6,31 @@ import { GenreView } from "./PlaylistGenreView";
 
 function SearchResultPlaylistCollection() {
   const location = useLocation<{ searchQuery: string }>();
-  const { data: searchResults, fetchNextPage, hasNextPage, isFetchingNextPage } = useSpotifyInfiniteQuery<SpotifyApi.SearchResponse>(
+  const { data: searchResults, fetchNextPage, hasNextPage, isFetchingNextPage, isError, isLoading, refetch } = useSpotifyInfiniteQuery<SpotifyApi.SearchResponse>(
     QueryCacheKeys.searchPlaylist,
     (spotifyApi, { pageParam }) => spotifyApi.searchPlaylists(location.state.searchQuery, { limit: 20, offset: pageParam }).then((res) => res.body),
     {
       getNextPageParam: (lastPage) => {
-        return (lastPage.playlists?.offset ?? 0) + 1;
+        if (lastPage.playlists?.next) {
+          return (lastPage.playlists?.offset ?? 0) + (lastPage.playlists?.limit ?? 0);
+        }
       },
     }
   );
   return (
     <GenreView
-      heading={"Search: "+location.state.searchQuery}
+      isError={isError}
+      isLoading={isLoading || isFetchingNextPage}
+      refetch={refetch}
+      heading={"Search: " + location.state.searchQuery}
       playlists={
         (searchResults?.pages
           ?.map((page) => page.playlists?.items)
           .filter(Boolean)
           .flat(1) as SpotifyApi.PlaylistObjectSimplified[]) ?? []
       }
-      loadMore={() => {
-        fetchNextPage();
-      }}
-      isLoadable={hasNextPage || !isFetchingNextPage}
+      loadMore={hasNextPage ? () => fetchNextPage() : undefined}
+      isLoadable={!isFetchingNextPage}
     />
   );
 }
diff --git a/src/components/SearchResultSongsCollection.tsx b/src/components/SearchResultSongsCollection.tsx
new file mode 100644
index 00000000..a1b1c30a
--- /dev/null
+++ b/src/components/SearchResultSongsCollection.tsx
@@ -0,0 +1,58 @@
+import { Button, ScrollArea, Text, View } from "@nodegui/react-nodegui";
+import React from "react";
+import { useLocation } from "react-router";
+import { QueryCacheKeys } from "../conf";
+import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
+import { TrackTableIndex } from "./PlaylistView";
+import PlaceholderApplet from "./shared/PlaceholderApplet";
+import { TrackButton } from "./shared/TrackButton";
+
+function SearchResultSongsCollection() {
+  const location = useLocation<{ searchQuery: string }>();
+  const { data: searchResults, fetchNextPage, hasNextPage, isFetchingNextPage, isError, isLoading, refetch } = useSpotifyInfiniteQuery<SpotifyApi.SearchResponse>(
+    QueryCacheKeys.searchSongs,
+    (spotifyApi, { pageParam }) => spotifyApi.searchTracks(location.state.searchQuery, { limit: 20, offset: pageParam }).then((res) => res.body),
+    {
+      getNextPageParam: (lastPage) => {
+        if (lastPage.tracks?.next) {
+          return (lastPage.tracks?.offset ?? 0) + (lastPage.tracks?.limit ?? 0);
+        }
+      },
+    }
+  );
+  return (
+    <View style="flex: 1; flex-direction: 'column';">
+      <Text>{`
+      <center>
+        <h2>Search: ${location.state.searchQuery}</h2>
+      </center>
+      `}</Text>
+      <TrackTableIndex />
+      <ScrollArea style="flex: 1; border: none;">
+        <View style="flex: 1; flex-direction: 'column';">
+          <PlaceholderApplet error={isError} loading={isLoading || isFetchingNextPage} message="Failed querying spotify" reload={refetch} />
+          {searchResults?.pages
+            .map((searchResult) => searchResult.tracks?.items)
+            .filter(Boolean)
+            .flat(1)
+            .map((track, index) => track && <TrackButton key={index + track.id} index={index} track={track} />)}
+
+          {hasNextPage && (
+            <Button
+              style="flex-grow: 0; align-self: 'center';"
+              text="Load more"
+              on={{
+                clicked() {
+                  fetchNextPage();
+                },
+              }}
+              enabled={!isFetchingNextPage}
+            />
+          )}
+        </View>
+      </ScrollArea>
+    </View>
+  );
+}
+
+export default SearchResultSongsCollection;
diff --git a/src/components/shared/ErrorApplet.tsx b/src/components/shared/ErrorApplet.tsx
deleted file mode 100644
index 5e8a07af..00000000
--- a/src/components/shared/ErrorApplet.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { View, Button, Text } from "@nodegui/react-nodegui";
-import React from "react"
-
-interface ErrorAppletProps {
-	message?: string;
-	reload: Function;
-	helps?: boolean;
-}
-
-function ErrorApplet({ message, reload, helps }: ErrorAppletProps) {
-	return (
-		<View style="flex-direction: 'column'; align-items: 'center';">
-			<Text openExternalLinks>{`
-      	<h3>${message ? message : 'An error occured'}</h3>
-      	${helps ? `<p>Check if you're connected to internet & then try again. If the issue still persists ask for help or create a <a href="https://github.com/krtirtho/spotube/issues">issue</a>
-      	  </p>`: ``
-				}
-      `}</Text>
-			<Button on={{ clicked() { reload() } }} text="Reload" />
-		</View>
-	)
-}
-
-export default ErrorApplet;
\ No newline at end of file
diff --git a/src/components/shared/PlaceholderApplet.tsx b/src/components/shared/PlaceholderApplet.tsx
new file mode 100644
index 00000000..038db56b
--- /dev/null
+++ b/src/components/shared/PlaceholderApplet.tsx
@@ -0,0 +1,56 @@
+import { View, Button, Text } from "@nodegui/react-nodegui";
+import { QLabel, QMovie, } from "@nodegui/nodegui";
+import React, { useEffect, useRef } from "react";
+import { loadingSpinner } from "../../icons";
+
+interface ErrorAppletProps {
+  error: boolean;
+  loading: boolean;
+  message?: string;
+  reload: Function;
+  helps?: boolean;
+}
+
+function PlaceholderApplet({ message, reload, helps, loading, error }: ErrorAppletProps) {
+  const textRef = useRef<QLabel>();
+  const movie = new QMovie();
+
+  useEffect(() => {
+    movie.setFileName(loadingSpinner);
+    textRef.current?.setMovie(movie);
+    textRef.current?.show();
+    movie.start();
+  }, []);
+  if (loading) {
+    return (
+      <View style="flex: 1; justify-content: 'center'; align-items: 'center';">
+        <Text ref={textRef} />
+      </View>
+    );
+  } else if (error) {
+    return (
+      <View style="flex-direction: 'column'; align-items: 'center';">
+        <Text openExternalLinks>{`
+      	<h3>${message ? message : "An error occured"}</h3>
+      	${
+          helps
+            ? `<p>Check if you're connected to internet & then try again. If the issue still persists ask for help or create a <a href="https://github.com/krtirtho/spotube/issues">issue</a>
+      	  </p>`
+            : ``
+        }
+      `}</Text>
+        <Button
+          on={{
+            clicked() {
+              reload();
+            },
+          }}
+          text="Reload"
+        />
+      </View>
+    );
+  }
+  return <></>;
+}
+
+export default PlaceholderApplet;
diff --git a/src/components/shared/PlaylistCard.tsx b/src/components/shared/PlaylistCard.tsx
new file mode 100644
index 00000000..821c0a4c
--- /dev/null
+++ b/src/components/shared/PlaylistCard.tsx
@@ -0,0 +1,123 @@
+import { CursorShape, QIcon, QMouseEvent } from '@nodegui/nodegui';
+import { Text, View } from '@nodegui/react-nodegui';
+import React, { useContext, useMemo, useState } from 'react'
+import { useHistory } from 'react-router';
+import { QueryCacheKeys } from '../../conf';
+import playerContext from '../../context/playerContext';
+import { generateRandomColor, getDarkenForeground } from '../../helpers/RandomColor';
+import showError from '../../helpers/showError';
+import usePlaylistReaction from '../../hooks/usePlaylistReaction';
+import useSpotifyQuery from '../../hooks/useSpotifyQuery';
+import { heart, heartRegular, pause, play } from '../../icons';
+import { audioPlayer } from '../Player';
+import IconButton from './IconButton';
+
+interface PlaylistCardProps {
+  playlist: SpotifyApi.PlaylistObjectSimplified;
+}
+
+const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
+  const { id, description, name, images } = playlist;
+  const history = useHistory();
+  const [hovered, setHovered] = useState(false);
+  const { setCurrentTrack, currentPlaylist, setCurrentPlaylist } = useContext(playerContext);
+  const { refetch } = useSpotifyQuery<SpotifyApi.PlaylistTrackObject[]>([QueryCacheKeys.playlistTracks, id], (spotifyApi) => spotifyApi.getPlaylistTracks(id).then((track) => track.body.items), {
+    initialData: [],
+    enabled: false,
+  });
+  const { reactToPlaylist, isFavorite } = usePlaylistReaction();
+
+  const handlePlaylistPlayPause = async () => {
+    try {
+      const { data: tracks, isSuccess } = await refetch();
+      if (currentPlaylist?.id !== id && isSuccess && tracks) {
+        setCurrentPlaylist({ tracks, id, name, thumbnail: images[0].url });
+        setCurrentTrack(tracks[0].track);
+      } else {
+        await audioPlayer.stop();
+        setCurrentTrack(undefined);
+        setCurrentPlaylist(undefined);
+      }
+    } catch (error) {
+      showError(error, "[Failed adding playlist to queue]: ");
+    }
+  };
+
+  function gotoPlaylist(native?: any) {
+    const key = new QMouseEvent(native);
+    if (key.button() === 1) {
+      history.push(`/playlist/${id}`, { name, thumbnail: images[0].url });
+    }
+  }
+
+  const bgColor1 = useMemo(() => generateRandomColor(), []);
+  const color = useMemo(() => getDarkenForeground(bgColor1), [bgColor1]);
+
+  const playlistStyleSheet = `
+    #playlist-container{
+      width: 150px;
+      flex-direction: column;
+      padding: 10px;
+      min-height: 150px;
+      background-color: ${bgColor1};
+      border-radius: 5px;
+      margin: 5px;
+    }
+    #playlist-container:hover{
+      border: 1px solid green;
+    }
+    #playlist-container:clicked{
+      border: 5px solid green;
+    }
+  `;
+
+  return (
+    <View
+      id="playlist-container"
+      cursor={CursorShape.PointingHandCursor}
+      styleSheet={playlistStyleSheet}
+      on={{
+        MouseButtonRelease: gotoPlaylist,
+        HoverEnter() {
+          setHovered(true);
+        },
+        HoverLeave() {
+          setHovered(false);
+        },
+      }}>
+      {/* <CachedImage src={thumbnail} maxSize={{ height: 150, width: 150 }} scaledContents alt={name} /> */}
+      <Text style={`color: ${color};`} wordWrap on={{ MouseButtonRelease: gotoPlaylist }}>
+        {`
+          <center>
+            <h3>${name}</h3>
+            <p>${description}</p>
+          </center>
+        `}
+      </Text>
+      {(hovered || currentPlaylist?.id === id) && (
+        <>
+          <IconButton
+            style={`position: absolute; bottom: 30px; left: '55%'; background-color: ${color};`}
+            icon={new QIcon(isFavorite(id) ? heart : heartRegular)}
+            on={{
+              clicked() {
+                reactToPlaylist(playlist);
+              },
+            }}
+          />
+          <IconButton
+            icon={new QIcon(currentPlaylist?.id === id ? pause : play)}
+            style={`position: absolute; bottom: 30px; left: '80%'; background-color: ${color};`}
+            on={{
+              clicked() {
+                handlePlaylistPlayPause();
+              },
+            }}
+          />
+        </>
+      )}
+    </View>
+  );
+};
+
+export default PlaylistCard;
\ No newline at end of file
diff --git a/src/components/shared/TrackButton.tsx b/src/components/shared/TrackButton.tsx
new file mode 100644
index 00000000..679035c9
--- /dev/null
+++ b/src/components/shared/TrackButton.tsx
@@ -0,0 +1,85 @@
+import { QIcon, QMouseEvent } from "@nodegui/nodegui";
+import { Text, View } from "@nodegui/react-nodegui";
+import React, { FC, useContext, useMemo } from "react";
+import playerContext from "../../context/playerContext";
+import { msToMinAndSec } from "../../helpers/msToMin:sec";
+import useTrackReaction from "../../hooks/useTrackReaction";
+import { heart, heartRegular, pause, play } from "../../icons";
+import { audioPlayer } from "../Player";
+import IconButton from "./IconButton";
+
+export interface TrackButtonProps {
+  track: SpotifyApi.TrackObjectFull;
+  playlist?: SpotifyApi.PlaylistObjectFull;
+  index: number;
+}
+
+export const TrackButton: FC<TrackButtonProps> = ({ track, index, playlist }) => {
+  const { reactToTrack, isFavorite } = useTrackReaction();
+  const { currentPlaylist, setCurrentPlaylist, setCurrentTrack, currentTrack } = useContext(playerContext);
+  const handlePlaylistPlayPause = (index?: number) => {
+    if (currentPlaylist?.id !== playlist?.id && playlist?.tracks) {
+      setCurrentPlaylist({ id: playlist.id, name: playlist.name, thumbnail: playlist.images[0].url, tracks: playlist.tracks.items });
+      setCurrentTrack(playlist.tracks.items[index ?? 0].track);
+    } else {
+      audioPlayer.stop().catch((error) => console.error("Failed to stop audio player: ", error));
+      setCurrentTrack(undefined);
+      setCurrentPlaylist(undefined);
+    }
+  };
+
+  const trackClickHandler = (track: SpotifyApi.TrackObjectFull) => {
+    setCurrentTrack(track);
+  };
+
+  const duration = useMemo(() => msToMinAndSec(track.duration_ms), []);
+  const active = (currentPlaylist?.id === playlist?.id && currentTrack?.id === track.id) || currentTrack?.id === track.id;
+  return (
+    <View
+      id={active?"active":"track-button"}
+      styleSheet={trackButtonStyle}
+      on={{
+        MouseButtonRelease(native: any) {
+          if (new QMouseEvent(native).button() === 1 && playlist) {
+            handlePlaylistPlayPause(index);
+          }
+        },
+      }}>
+      <Text style="padding: 5px;">{index + 1}</Text>
+      <View style="flex-direction: 'column'; width: '35%';">
+        <Text>{`<h3>${track.name}</h3>`}</Text>
+        <Text>{track.artists.map((artist) => artist.name).join(", ")}</Text>
+      </View>
+      <Text style="width: '25%';">{track.album.name}</Text>
+      <Text style="width: '15%';">{duration}</Text>
+      <View style="width: '15%'; padding: 5px; justify-content: 'space-around';">
+        <IconButton
+          icon={new QIcon(isFavorite(track.id) ? heart : heartRegular)}
+          on={{
+            clicked() {
+              reactToTrack({ track, added_at: "" });
+            },
+          }}
+        />
+        <IconButton
+          icon={new QIcon(active ? pause : play)}
+          on={{
+            clicked() {
+              trackClickHandler(track);
+            },
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const trackButtonStyle = `
+  #active{
+    background-color: #34eb71;
+    color: #333;
+  }
+  #track-button:hover{
+    background-color: rgba(229, 224, 224, 0.48);
+  }
+`;
diff --git a/src/conf.ts b/src/conf.ts
index c8428822..bc0fe8fa 100644
--- a/src/conf.ts
+++ b/src/conf.ts
@@ -17,5 +17,6 @@ export enum QueryCacheKeys{
   userPlaylists = "user-palylists",
   userSavedTracks = "user-saved-tracks",
   search = "search",
-  searchPlaylist="searchPlaylist"
+  searchPlaylist = "searchPlaylist",
+  searchSongs = "searchSongs"
 }
\ No newline at end of file
diff --git a/src/hooks/useTrackReaction.ts b/src/hooks/useTrackReaction.ts
index bafe59a8..5f6e3e72 100644
--- a/src/hooks/useTrackReaction.ts
+++ b/src/hooks/useTrackReaction.ts
@@ -1,13 +1,18 @@
 import { useQueryClient } from "react-query";
 import { QueryCacheKeys } from "../conf";
+import useSpotifyInfiniteQuery from "./useSpotifyInfiniteQuery";
 import useSpotifyMutation from "./useSpotifyMutation";
 import useSpotifyQuery from "./useSpotifyQuery";
 
 function useTrackReaction() {
   const queryClient = useQueryClient();
-  const { data: favoriteTracks } = useSpotifyQuery<SpotifyApi.SavedTrackObject[]>(QueryCacheKeys.userSavedTracks, (spotifyApi) =>
-    spotifyApi.getMySavedTracks({ limit: 50 }).then((tracks) => tracks.body.items)
+  const { data: userSavedTracks } = useSpotifyInfiniteQuery<SpotifyApi.UsersSavedTracksResponse>(QueryCacheKeys.userSavedTracks, (spotifyApi, { pageParam }) =>
+    spotifyApi.getMySavedTracks({ limit: 50, offset: pageParam }).then((res) => res.body)
   );
+  const favoriteTracks = userSavedTracks?.pages
+    ?.map((page) => page.items)
+    .filter(Boolean)
+    .flat(1) as SpotifyApi.SavedTrackObject[] | undefined;
   const { mutate: reactToTrack } = useSpotifyMutation<{}, SpotifyApi.SavedTrackObject>(
     (spotifyApi, { track }) => spotifyApi[isFavorite(track.id) ? "removeFromMySavedTracks" : "addToMySavedTracks"]([track.id]).then((res) => res.body),
     {
diff --git a/src/icons.ts b/src/icons.ts
index 45f5e11c..3cfeed73 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -8,6 +8,7 @@ import _heart from "../assets/heart-solid.svg"
 import _random from "../assets/random-solid.svg"
 import _stop from "../assets/stop-solid.svg"
 import _search from "../assets/search-solid.svg";
+import _loadingSpinner from "../assets/loading-spinner.gif";
 
 export const play = _play;
 export const pause = _pause;
@@ -18,4 +19,5 @@ export const heartRegular = _heartRegular;
 export const heart = _heart;
 export const random = _random;
 export const stop = _stop;
-export const search = _search;
\ No newline at end of file
+export const search = _search;
+export const loadingSpinner = _loadingSpinner;
\ No newline at end of file
diff --git a/src/routes.tsx b/src/routes.tsx
index 09e269e2..7c83fc4a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -10,6 +10,7 @@ import CurrentPlaylist from "./components/CurrentPlaylist";
 import Library from "./components/Library";
 import Search from "./components/Search";
 import SearchResultPlaylistCollection from "./components/SearchResultPlaylistCollection";
+import SearchResultSongsCollection from "./components/SearchResultSongsCollection";
 
 function Routes() {
   const { isLoggedIn } = useContext(authContext);
@@ -46,6 +47,9 @@ function Routes() {
       <Route exact path="/search/playlists">
         <SearchResultPlaylistCollection />
       </Route>
+      <Route exact path="/search/songs">
+        <SearchResultSongsCollection />
+      </Route>
     </>
   );
 }