kbondelie/movie-night
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show re-roll loading skeleton at bottom of results grid

Browse Source 
Skeleton cards now append below existing results during re-roll
instead of appearing at the top. Auto-scrolls to show the loading
state, and hides the re-roll button until new results arrive.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kenny Bondelie
2026-03-14 20:16:09 -07:00
parent 00bd69cc70
commit 7c25de32bd
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/app.js
+21 -3
View File
@@ -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) {
document.getElementById('results').classList.add('hidden');
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');
}
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 = '';
}