Initial commit

frontend/src/components/common/LoadingSpinner.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { LoadingSpinner } from './LoadingSpinner'
+
+describe('LoadingSpinner', () => {
+  it('renders loading spinner', () => {
+    render(<LoadingSpinner />)
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
+  })
+
+  it('displays default message', () => {
+    render(<LoadingSpinner />)
+    expect(screen.getByTestId('spinner-message')).toHaveTextContent('Loading...')
+  })
+
+  it('displays custom message', () => {
+    render(<LoadingSpinner message="Please wait..." />)
+    expect(screen.getByTestId('spinner-message')).toHaveTextContent('Please wait...')
+  })
+
+  it('has correct aria attributes for accessibility', () => {
+    render(<LoadingSpinner ariaLabel="Loading data" />)
+    const spinner = screen.getByTestId('loading-spinner')
+    expect(spinner).toHaveAttribute('role', 'status')
+    expect(spinner).toHaveAttribute('aria-label', 'Loading data')
+    expect(spinner).toHaveAttribute('aria-busy', 'true')
+  })
+
+  it('uses default aria label', () => {
+    render(<LoadingSpinner />)
+    const spinner = screen.getByTestId('loading-spinner')
+    expect(spinner).toHaveAttribute('aria-label', 'Loading')
+  })
+})

frontend/src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+interface LoadingSpinnerProps {
+  message?: string
+  ariaLabel?: string
+}
+
+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>
+  )
+}