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/styles.css

@@ -558,6 +558,53 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 
 .status { padding: 16px 20px; color: var(--text-dim); font-size: 13px; }
 
+/* ===================== Skeleton loading ===================== */
+.skeleton-card {
+  cursor: default !important;
+  pointer-events: none;
+  border-color: transparent !important;
+  animation: cardIn 0.45s var(--ease) backwards !important;
+}
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-3);
+  border-radius: 9px;
+}
+.skeleton-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255,255,255,0.04) 40%,
+    rgba(255,255,255,0.07) 50%,
+    rgba(255,255,255,0.04) 60%,
+    transparent
+  );
+  animation: shimmer 1.6s ease-in-out infinite;
+}
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+.skeleton-card .thumb {
+  background: var(--bg-3);
+}
+.skeleton-line {
+  height: 14px;
+  width: 100%;
+  border-radius: 8px;
+}
+.skeleton-dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  align-self: center;
+  flex-shrink: 0;
+}
+
 /* ===================== Empty state ===================== */
 .empty-state {
   display: flex;