From 108b37dfe3fcac663eb663ca4ece6b9144f0341d Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Mon, 10 Mar 2025 18:56:09 -0600
Subject: [PATCH] Add search and album loaders

---
 src/components/Album.tsx | 36 ++++++++++++++++++++++++++----------
 src/pages/index.astro    | 20 +++++++++++---------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/components/Album.tsx b/src/components/Album.tsx
index 58104ea..d943d7a 100644
--- a/src/components/Album.tsx
+++ b/src/components/Album.tsx
@@ -2,14 +2,17 @@ import { useEffect, useState } from 'react'
 import { getTracks } from 'utils/search'
 
 import type { AlbumRow, TrackRow } from 'utils/types'
+import Loader from './Loader'
 
 export default function Album(props: { album: AlbumRow; lastReqRef: React.RefObject<number> }) {
   const { album, lastReqRef } = props
   const [open, setOpen] = useState(false)
 
   return (
-    <div className='album' onClick={() => setOpen((o) => !o)}>
-      <h3>{album.name}</h3>
+    <div className='album'>
+      <div className='album-title' onClick={() => setOpen((o) => !o)}>
+        <h3>{album.name}</h3>
+      </div>
       <TrackList url={album.url} open={open} lastReqRef={lastReqRef} />
     </div>
   )
@@ -18,10 +21,16 @@ export default function Album(props: { album: AlbumRow; lastReqRef: React.RefObj
 function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObject<number> }) {
   const { url, open, lastReqRef } = props
   const [tracks, setTracks] = useState<TrackRow[] | null>(null)
+  const [loading, setLoading] = useState(false)
 
   async function fetchTracks() {
-    const tracks = await getTracks(url, lastReqRef)
-    setTracks(tracks)
+    try {
+      setLoading(true)
+      const tracks = await getTracks(url, lastReqRef)
+      setTracks(tracks)
+    } finally {
+      setLoading(false)
+    }
   }
 
   useEffect(() => {
@@ -31,19 +40,26 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
   if (!open) return null
 
   return (
-    <div className='trackList'>
-      {tracks
-        ? tracks.map((t, i) => (
+    <div className='album-open'>
+      {loading ? (
+        <div className='loader-container'>
+          <Loader show />
+        </div>
+      ) : null}
+      {tracks && open ? (
+        <div className='track-list'>
+          {tracks.map((t, i) => (
             <div className='track'>
               <span className='track-name'>
-                <span className='track-number'>{(i + 1).toString().padStart(2, '0').slice(-2)}.</span>
+                <span className='track-number'>{(i + 1).toString().padStart(2, '0').slice(-2)}. </span>
                 <span>{t.name}</span>
               </span>
               <span className='format-tag'>FLAC/MP3</span>
               <TrackDownload url={url} lastReqRef={lastReqRef} />
             </div>
-          ))
-        : null}
+          ))}
+        </div>
+      ) : null}
     </div>
   )
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bd07ed1..c7ad26f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -57,7 +57,7 @@ import Downloader from '../components/Downloader'
     width: 30px;
     height: 30px;
     animation: spin 1s linear infinite;
-    margin: 20px auto;
+    margin: auto;
   }
   @keyframes spin {
     0% {
@@ -81,13 +81,13 @@ import Downloader from '../components/Downloader'
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   }
-  .album {
+  .album-title {
     padding: 15px;
     border-bottom: 1px solid #333;
     cursor: pointer;
     transition: background 0.2s;
   }
-  .album:hover {
+  .album-title:hover {
     background-color: #333;
   }
   .track {
@@ -136,10 +136,7 @@ import Downloader from '../components/Downloader'
     text-align: center;
     color: #858585;
   }
-  .album-title {
-    font-weight: 500;
-    margin-bottom: 4px;
-    color: #e0e0e0;
+  .album {
   }
   .album-meta {
     display: flex;
@@ -163,10 +160,15 @@ import Downloader from '../components/Downloader'
     background-color: #563d7c;
   }
   .results h3 {
-    padding: 0 15px;
-    margin: 0 0 15px 0;
+    margin: 0;
     font-size: 1.1em;
   }
+  .album-open {
+    background-color: #4a4a4a;
+  }
+  .album-open .loader-container {
+    padding: 6px;
+  }
 </style>
 
 <body>