From 762488d823a4f6fe9f20a2bc0d9c562c569fe79e Mon Sep 17 00:00:00 2001
From: IsraelGPT <Trackers@artistgrid.cx>
Date: Sun, 15 Feb 2026 23:39:56 +0000
Subject: [PATCH] load skeleton styling

---
 js/api.js       | 10 ++++++----
 js/music-api.js |  4 ++--
 js/ui.js        |  9 ++++++---
 styles.css      | 11 ++++++++---
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/js/api.js b/js/api.js
index 17dcae7..6d8427c 100644
--- a/js/api.js
+++ b/js/api.js
@@ -675,8 +675,10 @@ export class LosslessAPI {
 
     async getArtist(artistId, options = {}) {
         const cacheKey = options.lightweight ? `artist_${artistId}_light` : `artist_${artistId}`;
-        const cached = await this.cache.get('artist', cacheKey);
-        if (cached) return cached;
+        if (!options.skipCache) {
+            const cached = await this.cache.get('artist', cacheKey);
+            if (cached) return cached;
+        }
 
         const [primaryResponse, contentResponse] = await Promise.all([
             this.fetchWithRetry(`/artist/?id=${artistId}`),
@@ -811,7 +813,7 @@ export class LosslessAPI {
         }
     }
 
-    async getRecommendedTracksForPlaylist(tracks, limit = 20) {
+    async getRecommendedTracksForPlaylist(tracks, limit = 20, options = {}) {
         const artistMap = new Map();
 
         // Check if tracks already have artist info (some might)
@@ -872,7 +874,7 @@ export class LosslessAPI {
         const artistPromises = artistsToProcess.map(async (artist) => {
             try {
                 console.log(`Fetching tracks for artist: ${artist.name} (ID: ${artist.id})`);
-                const artistData = await this.getArtist(artist.id, { lightweight: true });
+                const artistData = await this.getArtist(artist.id, { lightweight: true, skipCache: options.skipCache });
                 if (artistData && artistData.tracks && artistData.tracks.length > 0) {
                     const newTracks = artistData.tracks.filter((track) => !seenTrackIds.has(track.id)).slice(0, 4);
                     return newTracks;
diff --git a/js/music-api.js b/js/music-api.js
index 5e0974f..d0902e7 100644
--- a/js/music-api.js
+++ b/js/music-api.js
@@ -154,9 +154,9 @@ export class MusicAPI {
         return api.getSimilarAlbums(cleanId);
     }
 
-    async getRecommendedTracksForPlaylist(tracks, limit = 20) {
+    async getRecommendedTracksForPlaylist(tracks, limit = 20, options = {}) {
         // Use Tidal for recommendations
-        return this.tidalAPI.getRecommendedTracksForPlaylist(tracks, limit);
+        return this.tidalAPI.getRecommendedTracksForPlaylist(tracks, limit, options);
     }
 
     // Cache methods
diff --git a/js/ui.js b/js/ui.js
index f01c0e2..0bc8f93 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -624,6 +624,7 @@ export class UIRenderer {
                     </div>
                 </div>
                 <div class="skeleton skeleton-track-duration"></div>
+                <div class="skeleton skeleton-track-actions"></div>
             </div>
         `;
     }
@@ -639,10 +640,10 @@ export class UIRenderer {
     }
 
     createSkeletonTracks(count = 5, showCover = false) {
-        return `<div class="skeleton-container">${Array(count)
+        return Array(count)
             .fill(0)
             .map(() => this.createSkeletonTrack(showCover))
-            .join('')}</div>`;
+            .join('');
     }
 
     createSkeletonCards(count = 6, isArtist = false) {
@@ -1560,7 +1561,9 @@ export class UIRenderer {
             try {
                 const seeds = await this.getSeeds();
                 const trackSeeds = seeds.slice(0, 5);
-                const recommendedTracks = await this.api.getRecommendedTracksForPlaylist(trackSeeds, 20);
+                const recommendedTracks = await this.api.getRecommendedTracksForPlaylist(trackSeeds, 20, {
+                    skipCache: forceRefresh,
+                });
 
                 const filteredTracks = await this.filterUserContent(recommendedTracks, 'track');
 
diff --git a/styles.css b/styles.css
index 727a3d0..9e536f9 100644
--- a/styles.css
+++ b/styles.css
@@ -3289,11 +3289,10 @@ input:checked + .slider::before {
 
 .skeleton-track {
     display: grid;
-    grid-template-columns: 40px 1fr 80px 48px;
+    grid-template-columns: 40px 1fr 60px 40px;
     align-items: center;
     gap: var(--spacing-md);
-    padding: var(--spacing-sm);
-    margin-bottom: 2px;
+    padding: var(--spacing-sm) var(--spacing-md);
 }
 
 .skeleton-track-number {
@@ -3341,6 +3340,12 @@ input:checked + .slider::before {
     height: 14px;
 }
 
+.skeleton-track-actions {
+    width: 24px;
+    height: 24px;
+    justify-self: flex-end;
+}
+
 .skeleton-card {
     background-color: var(--card);
     border-radius: var(--radius);