Styling fix and scraper bug fix

frontend/src/components/common/LoadingSpinner.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import './loading-spinner.css'
 
 interface LoadingSpinnerProps {
   message?: string
@@ -7,9 +8,9 @@ interface LoadingSpinnerProps {
 
 export function LoadingSpinner({ message = 'Loading...', ariaLabel = 'Loading' }: LoadingSpinnerProps): ReactNode {
   return (
-    <div role="status" aria-label={ariaLabel} aria-busy={true} data-testid="loading-spinner">
-      <div data-testid="spinner-icon" role="presentation">⊙</div>
-      <p data-testid="spinner-message">{message}</p>
+    <div className="loading-spinner" role="status" aria-label={ariaLabel} aria-busy={true} data-testid="loading-spinner">
+      <div className="loading-spinner__icon" data-testid="spinner-icon" role="presentation">⊙</div>
+      <p className="loading-spinner__message" data-testid="spinner-message">{message}</p>
     </div>
   )
 }

frontend/src/components/common/loading-spinner.css

@@ -0,0 +1,39 @@
+/* Loading Spinner */
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sp-8);
+  gap: var(--sp-4);
+  min-height: 300px;
+}
+
+.loading-spinner__icon {
+  font-size: 48px;
+  color: var(--c-accent);
+  animation: spin 2s linear infinite;
+  display: block;
+}
+
+.loading-spinner__message {
+  font-size: var(--fs-base);
+  color: var(--c-text-muted);
+  margin: 0;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Reduce Motion */
+@media (prefers-reduced-motion: reduce) {
+  .loading-spinner__icon {
+    animation: none;
+  }
+}