Add loading skeletons for search results

Replace bare 'Searching…' text with 8 animated skeleton cards that
mirror the real card layout (thumbnail, title, channel, menu dot).
Shimmer animation sweeps across placeholder blocks until results arrive.

Files:
- frontend/app.js: showSearchSkeletons() function, wired into search submit
- frontend/styles.css: .skeleton-card, .skeleton-shimmer, .skeleton-line, .skeleton-dot styles with shimmer animation

frontend/app.js

@@ -561,6 +561,23 @@ function currentList() {
   return [];
 }
 
+function showSearchSkeletons() {
+  els.status.classList.add('hidden');
+  els.cards.innerHTML = '';
+  for (let i = 0; i < 8; i++) {
+    const s = document.createElement('div');
+    s.className = 'card skeleton-card';
+    s.innerHTML = `
+      <div class="thumb skeleton-shimmer"></div>
+      <div class="card-info">
+        <div class="skeleton-line skeleton-shimmer" style="width:85%"></div>
+        <div class="skeleton-line skeleton-shimmer" style="width:55%;margin-top:8px"></div>
+      </div>
+      <div class="skeleton-dot skeleton-shimmer"></div>`;
+    els.cards.appendChild(s);
+  }
+}
+
 function renderList() {
   if (view.type === 'settings') { renderSettings(); return; }
 
@@ -956,15 +973,15 @@ function wireUI() {
     if (!q) return;
     view = { type: 'search' };
     render();
-    els.status.classList.remove('hidden');
-    els.status.textContent = 'Searching…';
-    els.cards.innerHTML = '';
+    showSearchSkeletons();
     try {
       const res = await API.search(q);
       if (!res || !res.ok) throw new Error(res?.error || 'Search failed');
       searchResults = res.results || [];
       renderList();
     } catch (err) {
+      els.cards.innerHTML = '';
+      els.status.classList.remove('hidden');
       els.status.textContent = '⚠ ' + err.message;
     }
   });