Add frontend UI for async series loading

- Add SERIES_LOADING_UPDATE WebSocket event
- Update series cards to display loading indicators
- Add real-time status updates via WebSocket
- Include progress tracking (episodes, NFO, logo, images)
- Add CSS styling for loading states
- Implement updateSeriesLoadingStatus function

src/server/web/static/css/components/cards.css

@@ -103,6 +103,77 @@
   opacity: 0.5;
 }
 
+/* Series Card Loading State */
+.series-card.loading {
+  border-color: var(--color-info);
+  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
+}
+
+/* Loading Indicator */
+.loading-indicator {
+  background: var(--color-surface-secondary, var(--color-surface));
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  border: 1px solid var(--color-border);
+}
+
+.loading-status {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.status-text {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.status-text i.fa-spinner {
+  color: var(--color-info);
+}
+
+.progress-items {
+  display: flex;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+.progress-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-caption);
+}
+
+.progress-item.completed {
+  color: var(--color-success);
+}
+
+.progress-item.completed .icon {
+  color: var(--color-success);
+}
+
+.progress-item.pending {
+  color: var(--color-text-tertiary);
+}
+
+.progress-item.pending .icon {
+  color: var(--color-text-tertiary);
+}
+
+.progress-item .icon {
+  font-size: 1.1em;
+  font-weight: bold;
+}
+
+.progress-item .label {
+  font-size: 0.9em;
+}
+
 /* Series Card Actions */
 .series-actions {
   display: flex;