Show re-roll loading skeleton at bottom of results grid

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>

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
-        document.getElementById('results').classList.add('hidden');
+        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 = '';
     }