diff --git a/app/static/app.js b/app/static/app.js index d8f6a0d..55e068f 100644 --- a/app/static/app.js +++ b/app/static/app.js @@ -132,11 +132,23 @@ async function findMovies(excludeIds = []) { document.getElementById('empty-state').classList.add('hidden'); document.getElementById('error-state').classList.add('hidden'); - // On re-roll, keep existing results visible; on fresh search, hide them - if (!isReroll) { + if (isReroll) { + // Show skeleton cards at the bottom of the existing grid + const grid = document.getElementById('results-grid'); + for (let i = 0; i < 3; i++) { + const placeholder = document.createElement('div'); + placeholder.className = 'skeleton-placeholder bg-dark-200 rounded-xl h-96 animate-pulse'; + if (i === 1) placeholder.classList.add('delay-100'); + if (i === 2) placeholder.classList.add('delay-200'); + grid.appendChild(placeholder); + } + // Hide the re-roll button while loading, scroll to skeletons + document.getElementById('reroll-btn').classList.add('hidden'); + grid.lastElementChild.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } else { document.getElementById('results').classList.add('hidden'); + document.getElementById('loading').classList.remove('hidden'); } - document.getElementById('loading').classList.remove('hidden'); try { const additionalIds = selectedUserIds.filter(id => id !== currentUser.id); @@ -176,6 +188,8 @@ async function findMovies(excludeIds = []) { loadHistory(); } catch (err) { document.getElementById('loading').classList.add('hidden'); + document.getElementById('results-grid').querySelectorAll('.skeleton-placeholder').forEach(el => el.remove()); + document.getElementById('reroll-btn').classList.remove('hidden'); document.getElementById('error-message').textContent = err.message; document.getElementById('error-state').classList.remove('hidden'); } @@ -185,6 +199,10 @@ function renderResults(data, append = false) { document.getElementById('loading').classList.add('hidden'); const grid = document.getElementById('results-grid'); + // Remove any skeleton placeholders from re-roll + grid.querySelectorAll('.skeleton-placeholder').forEach(el => el.remove()); + document.getElementById('reroll-btn').classList.remove('hidden'); + if (!append) { grid.innerHTML = ''; }