frontend/src/components/LoadingOverlay.js

'use client';
import styles from './LoadingOverlay.module.css';

export default function LoadingOverlay({ message = 'Analyzing silhouette...' }) {
  return (
    <div className={styles.overlay}>
      <div className={styles.spinner}>
        <svg viewBox="0 0 100 100" className={styles.pokeball}>
          <circle cx="50" cy="50" r="45" fill="none" stroke="var(--text-primary)" strokeWidth="5" />
          <path d="M 5 50 A 45 45 0 0 1 95 50 Z" fill="var(--accent-primary)" />
          <path d="M 5 50 A 45 45 0 0 0 95 50 Z" fill="#ffffff" />
          <line x1="5" y1="50" x2="95" y2="50" stroke="var(--bg-primary)" strokeWidth="6" />
          <circle cx="50" cy="50" r="15" fill="#ffffff" stroke="var(--bg-primary)" strokeWidth="6" />
          <circle cx="50" cy="50" r="6" fill="var(--bg-primary)" />
        </svg>
      </div>
      <p className={styles.text}>{message}</p>
    </div>
  );
}